修复部分bug部分页面的调整
This commit is contained in:
@@ -749,13 +749,17 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.generalModel_state .generalModel_state_item .ant-picker-range,
|
.generalModel_state .generalModel_state_item .ant-picker-range,
|
||||||
.generalModel_state .generalModel_state_item .ant-select-selector,
|
.generalModel_state .generalModel_state_item .ant-select-selector,
|
||||||
.generalModel_state .generalModel_state_item .range_picker {
|
.generalModel_state .generalModel_state_item .range_picker {
|
||||||
height: 2.5rem !important;
|
height: 5rem !important;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: calc(2rem - 1px * 2) !important;
|
padding-right: 3rem !important;
|
||||||
|
padding-left: 2rem !important;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
background-color: #f3f3f3;
|
background-color: #f3f3f3;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: calc(100% - 4rem);
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item .ant-picker-input > input {
|
.generalModel_state .generalModel_state_item .ant-picker-input > input {
|
||||||
@@ -766,7 +770,8 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item {
|
.generalModel_state .generalModel_state_item .ant-select-lg .ant-select-selector .ant-select-selection-item {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 2.7rem;
|
line-height: 2.7rem;
|
||||||
}
|
}
|
||||||
@@ -2179,63 +2184,53 @@ textarea:focus {
|
|||||||
top: 0rem;
|
top: 0rem;
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box,
|
.generage_btn_box {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box,
|
|
||||||
.library_page .input_border .generage_btn_box,
|
|
||||||
.productImg_content .input_border .generage_btn_box,
|
|
||||||
.poseTransfer .input_border .generage_btn_box,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box,
|
|
||||||
.generate .input_border .generage_btn_box {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .generage_btn,
|
.generage_btn_box .fi-bs-magic-wand {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .generage_btn,
|
margin-right: 1rem;
|
||||||
.library_page .input_border .generage_btn_box .generage_btn,
|
display: flex;
|
||||||
.productImg_content .input_border .generage_btn_box .generage_btn,
|
cursor: pointer;
|
||||||
.poseTransfer .input_border .generage_btn_box .generage_btn,
|
transition: all 0.3s;
|
||||||
.scaleImage_modal .input_border .generage_btn_box .generage_btn,
|
position: relative;
|
||||||
.accountEdit_page .input_border .generage_btn_box .generage_btn,
|
z-index: 4;
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .generage_btn,
|
width: 4rem;
|
||||||
.generate .input_border .generage_btn_box .generage_btn {
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.generage_btn_box .fi-bs-magic-wand.fi-br-loading {
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.generage_btn_box .fi-bs-magic-wand.active {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.generage_btn_box .fi-bs-magic-wand.forbidden {
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
.generage_btn_box .generage_btn {
|
||||||
|
margin-left: 2rem;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
box-sizing: content-box;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.generage_btn_box .generage_btn {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .icon-xiala,
|
.generage_btn_box .icon-xiala {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.library_page .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.productImg_content .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
|
|
||||||
.generate .input_border .generage_btn_box .icon-xiala {
|
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .icon-xiala.active,
|
.generage_btn_box .icon-xiala.active {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.library_page .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.productImg_content .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
|
|
||||||
.generate .input_border .generage_btn_box .icon-xiala.active {
|
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content,
|
.generage_btn_box .content {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .content,
|
|
||||||
.library_page .input_border .generage_btn_box .content,
|
|
||||||
.productImg_content .input_border .generage_btn_box .content,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .content,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .content,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .content,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
|
|
||||||
.generate .input_border .generage_btn_box .content {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
@@ -2247,15 +2242,7 @@ textarea:focus {
|
|||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content > div,
|
.generage_btn_box .content > div {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .content > div,
|
|
||||||
.library_page .input_border .generage_btn_box .content > div,
|
|
||||||
.productImg_content .input_border .generage_btn_box .content > div,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .content > div,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .content > div,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .content > div,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
|
|
||||||
.generate .input_border .generage_btn_box .content > div {
|
|
||||||
background: #cccccc;
|
background: #cccccc;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
@@ -2264,44 +2251,12 @@ textarea:focus {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content > div.active,
|
.generage_btn_box .content > div.active {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .content > div.active,
|
|
||||||
.library_page .input_border .generage_btn_box .content > div.active,
|
|
||||||
.productImg_content .input_border .generage_btn_box .content > div.active,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .content > div.active,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .content > div.active,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .content > div.active,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div.active,
|
|
||||||
.generate .input_border .generage_btn_box .content > div.active {
|
|
||||||
background-color: #616161;
|
background-color: #616161;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content > div:hover,
|
.generage_btn_box .content > div:hover {
|
||||||
.design_detail_modal_component .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.library_page .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.productImg_content .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.poseTransfer .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.scaleImage_modal .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.accountEdit_page .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
|
|
||||||
.generate .input_border .generage_btn_box .content > div:hover {
|
|
||||||
background: #999999;
|
background: #999999;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn,
|
|
||||||
.design_detail_modal_component .input_border .generage_btn,
|
|
||||||
.library_page .input_border .generage_btn,
|
|
||||||
.productImg_content .input_border .generage_btn,
|
|
||||||
.poseTransfer .input_border .generage_btn,
|
|
||||||
.scaleImage_modal .input_border .generage_btn,
|
|
||||||
.accountEdit_page .input_border .generage_btn,
|
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn,
|
|
||||||
.generate .input_border .generage_btn {
|
|
||||||
margin-left: 2rem;
|
|
||||||
display: flex;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
box-sizing: content-box;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.hideChecked {
|
.hideChecked {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|||||||
@@ -824,13 +824,19 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.ant-picker-range,.ant-select-selector,.range_picker{
|
.ant-picker-range,.ant-select-selector,.range_picker{
|
||||||
height: 2.5rem !important;
|
height: 5rem !important;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: calc(2rem - 1px * 2) !important;
|
// padding: 0 calc(2rem - 1px * 2) !important;
|
||||||
|
padding-right: 3rem !important;
|
||||||
|
padding-left: 2rem !important;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
background-color: #f3f3f3;
|
background-color: #f3f3f3;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: calc(100% - 4rem);
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
// width: calc(100% - 3rem);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.ant-picker-input > input{
|
.ant-picker-input > input{
|
||||||
@@ -841,9 +847,8 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.ant-select-selector{
|
.ant-select-selector{
|
||||||
.ant-select-selection-item{
|
.ant-select-selection-item{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// display: flex;
|
display: flex;
|
||||||
display: inline-block;
|
align-items: center;
|
||||||
// align-items: center;
|
|
||||||
//文字超出隐藏
|
//文字超出隐藏
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 2.7rem;
|
line-height: 2.7rem;
|
||||||
@@ -2111,63 +2116,84 @@ textarea:focus{
|
|||||||
// color: red;
|
// color: red;
|
||||||
// width: 100%;
|
// width: 100%;
|
||||||
// }
|
// }
|
||||||
.generage_btn_box{
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
}
|
||||||
align-items: center;
|
}
|
||||||
.generage_btn{
|
.generage_btn_box{
|
||||||
width: 10rem;
|
position: relative;
|
||||||
}
|
display: flex;
|
||||||
.icon-xiala{
|
align-items: center;
|
||||||
margin-left: 1rem;
|
.fi-bs-magic-wand{
|
||||||
transition: all .3s;
|
margin-right:1rem;
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
&.active{
|
cursor: pointer;
|
||||||
transform: rotate(180deg);
|
transition: all .3s;
|
||||||
}
|
position: relative;
|
||||||
}
|
z-index: 4;
|
||||||
.content{
|
width: 4rem;
|
||||||
position: absolute;
|
align-items: center;
|
||||||
top: 100%;
|
background-color: #fff;
|
||||||
width: calc(100% - 2rem);
|
justify-content: center;
|
||||||
left: 0rem;
|
&.fi-br-loading{
|
||||||
text-align: center;
|
height: 100%;
|
||||||
border-radius: calc(1rem* 1.2);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
overflow: hidden;
|
|
||||||
z-index: 3;
|
|
||||||
margin-top: .2rem;
|
|
||||||
margin-left: 2rem;
|
|
||||||
>div{
|
|
||||||
background: #cccccc;
|
|
||||||
line-height: 2;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
&.active{
|
|
||||||
background-color: #616161;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>div:hover{
|
|
||||||
background: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.generage_btn{
|
&.active{
|
||||||
// margin: 0 auto;
|
transform: rotate(180deg);
|
||||||
margin-left: 2rem;
|
}
|
||||||
display: flex;
|
&.forbidden{
|
||||||
font-size: 1.8rem;
|
cursor: no-drop;
|
||||||
padding: 1rem 2rem;
|
}
|
||||||
box-sizing: content-box;
|
}
|
||||||
justify-content: center;
|
.generage_btn{
|
||||||
|
// margin: 0 auto;
|
||||||
|
margin-left: 2rem;
|
||||||
|
display: flex;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
box-sizing: content-box;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.generage_btn{
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
.icon-xiala{
|
||||||
|
margin-left: 1rem;
|
||||||
|
transition: all .3s;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
left: 0rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: calc(1rem* 1.2);
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 3;
|
||||||
|
margin-top: .2rem;
|
||||||
|
margin-left: 2rem;
|
||||||
|
>div{
|
||||||
|
background: #cccccc;
|
||||||
|
line-height: 2;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
&.active{
|
||||||
|
background-color: #616161;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>div:hover{
|
||||||
|
background: #999999;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideChecked{
|
.hideChecked{
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
|||||||
@@ -139,6 +139,7 @@ import { BrushStore } from "../store/BrushStore";
|
|||||||
import { OperationType } from "../utils/layerHelper";
|
import { OperationType } from "../utils/layerHelper";
|
||||||
import { inject } from "vue";
|
import { inject } from "vue";
|
||||||
import VerticalSlider from "./VerticalSlider.vue";
|
import VerticalSlider from "./VerticalSlider.vue";
|
||||||
|
import SvgIcon from "@/component/Canvas/SvgIcon/index.vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
activeTool: {
|
activeTool: {
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import {
|
|||||||
defineAsyncComponent,
|
defineAsyncComponent,
|
||||||
shallowRef,
|
shallowRef,
|
||||||
provide,
|
provide,
|
||||||
defineExpose,
|
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { CanvasManager } from "./managers/CanvasManager";
|
import { CanvasManager } from "./managers/CanvasManager";
|
||||||
import { LayerManager } from "./managers/LayerManager";
|
import { LayerManager } from "./managers/LayerManager";
|
||||||
@@ -128,7 +127,6 @@ onMounted(async () => {
|
|||||||
canvasHeight.value = canvasContainerRef.value.clientWidth;
|
canvasHeight.value = canvasContainerRef.value.clientWidth;
|
||||||
canvasWidth.value = canvasContainerRef.value.clientHeight;
|
canvasWidth.value = canvasContainerRef.value.clientHeight;
|
||||||
}
|
}
|
||||||
console.log(12312)
|
|
||||||
// 创建管理器实例
|
// 创建管理器实例
|
||||||
canvasManager = new CanvasManager(canvasRef.value, {
|
canvasManager = new CanvasManager(canvasRef.value, {
|
||||||
width: canvasContainerRef.value.clientWidth - layerWidth.value, // 初始化的时候需要减去侧边栏宽度
|
width: canvasContainerRef.value.clientWidth - layerWidth.value, // 初始化的时候需要减去侧边栏宽度
|
||||||
|
|||||||
@@ -1,12 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="c-svg">
|
<div class="c-svg">
|
||||||
<svg
|
<!-- <svg
|
||||||
:class="svgClass"
|
:class="svgClass"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:style="{ color: color, fontSize: size + 'px' }"
|
:style="{ color: color, fontSize: size + 'px' }"
|
||||||
>
|
>
|
||||||
<use :href="iconName"></use>
|
<use :href="iconName"></use>
|
||||||
</svg>
|
</svg> -->
|
||||||
|
<img
|
||||||
|
:class="svgClass"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:style="{ color: color, fontSize: size + 'px' }" :src='iconName' alt="">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -26,7 +30,12 @@ const props = defineProps({
|
|||||||
default: 16,
|
default: 16,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const iconName = computed(() => `#icon-${props.name}`);
|
const iconName = computed(() => {
|
||||||
|
console.log(require(`@/assets/icons/${props.name}.svg`))
|
||||||
|
return require(`@/assets/icons/${props.name}.svg`)
|
||||||
|
return imgUrl
|
||||||
|
});
|
||||||
|
// const iconName = computed(() => `#icon-${props.name}`);
|
||||||
const svgClass = computed(() => {
|
const svgClass = computed(() => {
|
||||||
if (props.name) return `svg-icon icon-${props.name}`;
|
if (props.name) return `svg-icon icon-${props.name}`;
|
||||||
return "svg-icon";
|
return "svg-icon";
|
||||||
|
|||||||
@@ -81,7 +81,7 @@ export default defineComponent({
|
|||||||
tcxToColor:'',
|
tcxToColor:'',
|
||||||
})
|
})
|
||||||
watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
|
watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
|
||||||
if(!newVal?.name && newVal.rgba && newVal.rgba?.r){
|
if(newVal.rgba && newVal.rgba?.r){
|
||||||
let data:any = await getColorName(newVal.rgba)
|
let data:any = await getColorName(newVal.rgba)
|
||||||
newVal.name = data.name
|
newVal.name = data.name
|
||||||
newVal.tcx = data.tcx
|
newVal.tcx = data.tcx
|
||||||
|
|||||||
@@ -171,7 +171,7 @@ export default defineComponent({
|
|||||||
ifSingle:editPrintElementData.overallSingle,
|
ifSingle:editPrintElementData.overallSingle,
|
||||||
level2Type:data.level2Type,
|
level2Type:data.level2Type,
|
||||||
location,
|
location,
|
||||||
minIOPath:data.minIOPath,
|
minIOPath:data.minIOPath || data.originalUrl,
|
||||||
path:data.url,
|
path:data.url,
|
||||||
priority:editPrintElementData.printZIndex,
|
priority:editPrintElementData.printZIndex,
|
||||||
scale,
|
scale,
|
||||||
|
|||||||
@@ -433,7 +433,9 @@ export default defineComponent({
|
|||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.molepositon{
|
.molepositon{
|
||||||
width: 30rem;
|
// width: 30rem;
|
||||||
|
// width: calc(66 * .470rem);
|
||||||
|
width: calc(66 * .457rem);
|
||||||
height: 66rem;
|
height: 66rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -339,7 +339,6 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #000;
|
color: #000;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
line-height: 1.3rem;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -311,7 +311,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
const getImageStrength = (num) => {
|
const getImageStrength = (num) => {
|
||||||
let imageStrength = num == 100? 95 :num
|
let imageStrength = num == 100? 95 :num
|
||||||
console.log(num)
|
|
||||||
return imageStrength;
|
return imageStrength;
|
||||||
};
|
};
|
||||||
const getPoseTransformData = ()=>{
|
const getPoseTransformData = ()=>{
|
||||||
@@ -332,7 +331,7 @@ export default defineComponent({
|
|||||||
SERIES_DESIGN:"design",
|
SERIES_DESIGN:"design",
|
||||||
TO_PRODUCT_IMAGE:"toProductImage",
|
TO_PRODUCT_IMAGE:"toProductImage",
|
||||||
RELIGHT:"relight",
|
RELIGHT:"relight",
|
||||||
POSE_TRANSFORM:"poseTransfer"
|
POSE_TRANSFER:"poseTransfer"
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
"buildType": buildTypeCorresponding[operationsData.buildType],
|
"buildType": buildTypeCorresponding[operationsData.buildType],
|
||||||
@@ -383,7 +382,12 @@ export default defineComponent({
|
|||||||
if (rv) {
|
if (rv) {
|
||||||
operations.loadingShow = false
|
operations.loadingShow = false
|
||||||
cancelDsign()
|
cancelDsign()
|
||||||
emit('getContentList')
|
let porjectData = operationsData.objectList.find(item => item.id === operationsData.projectData)
|
||||||
|
let project = {
|
||||||
|
value:porjectData?.id,
|
||||||
|
label:porjectData?.name,
|
||||||
|
}
|
||||||
|
emit('getContentList',project)
|
||||||
}
|
}
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
operations.loadingShow = false
|
operations.loadingShow = false
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="searchObject generalModel_state">
|
<div class="searchObject generalModel_state">
|
||||||
<div class="generalModel_state_item smail">
|
<div class="generalModel_state_item smail" style="margin-right: 1rem;">
|
||||||
<span>Project :</span>
|
<span>Project :</span>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="projectData"
|
v-model:value="projectData"
|
||||||
@@ -34,7 +34,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="createCloud">
|
<div class="createCloud">
|
||||||
<div class="gallery_btn" @click="createClound">Create</div>
|
<div class="gallery_btn" style="margin-right: 2rem;" @click="pagination">Search</div>
|
||||||
|
<div class="gallery_btn white" @click="createClound">Create</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contentList">
|
<div class="contentList">
|
||||||
@@ -55,13 +56,13 @@
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</div>
|
</div>
|
||||||
<a-pagination style="text-align: center;" v-model:current="currentPage" :total="total" show-less-items />
|
<a-pagination style="text-align: center;" @change="pagination" v-model:current="currentPage" :total="total" show-less-items />
|
||||||
</div>
|
</div>
|
||||||
<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
|
<createCloud ref="createCloud" :cloudList="generateList.seriesDesign" @getContentList="submitGetContentList"></createCloud>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount} from 'vue'
|
import { defineComponent,computed,ref,onMounted,nextTick,createVNode,toRefs, reactive, onBeforeUnmount, inject} from 'vue'
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
@@ -76,6 +77,7 @@ export default defineComponent({
|
|||||||
emits:['retrieve'],
|
emits:['retrieve'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
pageType:'list',
|
pageType:'list',
|
||||||
@@ -85,6 +87,7 @@ export default defineComponent({
|
|||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
projectData:null as any,//批量id
|
projectData:null as any,//批量id
|
||||||
createData:null as any,
|
createData:null as any,
|
||||||
|
settingGetHistory:inject('settingGetHistory') as any,
|
||||||
generateList:{
|
generateList:{
|
||||||
seriesDesign:[
|
seriesDesign:[
|
||||||
{
|
{
|
||||||
@@ -227,6 +230,14 @@ export default defineComponent({
|
|||||||
|
|
||||||
dataDom.createCloud.init(data.createData,obj)
|
dataDom.createCloud.init(data.createData,obj)
|
||||||
}
|
}
|
||||||
|
const createData = ()=>{
|
||||||
|
store.commit("createProbject");
|
||||||
|
store.commit("clearAllData");
|
||||||
|
store.commit("clearAllCollection");
|
||||||
|
store.commit("setAllBoardDataChoose",{});
|
||||||
|
store.commit("clearShowSketchboard",{});
|
||||||
|
store.commit("clearAllCollection");
|
||||||
|
}
|
||||||
const detailIamge = (item:any)=>{
|
const detailIamge = (item:any)=>{
|
||||||
//去除里面的T2025-04-17T13:45:43
|
//去除里面的T2025-04-17T13:45:43
|
||||||
if(item.process == '100.00%' || item.status == 1){
|
if(item.process == '100.00%' || item.status == 1){
|
||||||
@@ -236,31 +247,50 @@ export default defineComponent({
|
|||||||
size:10,
|
size:10,
|
||||||
buildType:item.buildType,
|
buildType:item.buildType,
|
||||||
}
|
}
|
||||||
|
createData()
|
||||||
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
|
Https.axiosPost(Https.httpUrls.getDesignCloudResult,value).then((rv)=>{
|
||||||
console.log(rv)
|
if(item.buildType == 'design'){
|
||||||
if(rv.design && rv.design.length > 0){
|
|
||||||
store.commit('addDesignCollectionList',rv.design)
|
store.commit('addDesignCollectionList',rv.design)
|
||||||
emit('retrieve','design')
|
router.push(`/home?history=${item.projectId}&source=batch`)
|
||||||
}else if(rv.toProductImage && rv.toProductImage.length > 0){
|
}else if(item.buildType == 'toProductImage'){
|
||||||
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
|
store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
|
||||||
emit('retrieve','toProduct')
|
router.push(`/home/tools?tools=toProduct&id=${item.projectId}&source=batch`)
|
||||||
}else if(rv.relight && rv.relight.length > 0){
|
}else if(item.buildType == 'relight'){
|
||||||
store.commit('setCloudList',{str:'relight',list:rv.relight})
|
store.commit('setCloudList',{str:'relight',list:rv.relight})
|
||||||
emit('retrieve','relight')
|
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
|
||||||
}else if(rv.poseTransfer && rv.poseTransfer.length > 0){
|
}else if(item.buildType == 'poseTransfer'){
|
||||||
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
|
store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
|
||||||
emit('retrieve','poseTransfer')
|
router.push(`/home/tools?tools=${item.buildType}&id=${item.projectId}&source=batch`)
|
||||||
}
|
}
|
||||||
|
// if(rv.design && rv.design.length > 0){
|
||||||
|
// store.commit('addDesignCollectionList',rv.design)
|
||||||
|
// emit('retrieve','design')
|
||||||
|
// }else if(rv.toProductImage && rv.toProductImage.length > 0){
|
||||||
|
// store.commit('setCloudList',{str:'toProduct',list:rv.toProductImage})
|
||||||
|
// emit('retrieve','toProduct')
|
||||||
|
// }else if(rv.relight && rv.relight.length > 0){
|
||||||
|
// store.commit('setCloudList',{str:'relight',list:rv.relight})
|
||||||
|
// emit('retrieve','relight')
|
||||||
|
// }else if(rv.poseTransfer && rv.poseTransfer.length > 0){
|
||||||
|
// store.commit('setCloudList',{str:'poseTransfer',list:rv.poseTransfer})
|
||||||
|
// emit('retrieve','poseTransfer')
|
||||||
|
// }
|
||||||
data.isGetContentList = false
|
data.isGetContentList = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const pagination = ()=>{
|
||||||
|
data.isGetContentList = true
|
||||||
|
getContentList()
|
||||||
|
}
|
||||||
|
let time = null as any
|
||||||
const getContentList = ()=>{
|
const getContentList = ()=>{
|
||||||
if(data.isGetContentList){
|
if(data.isGetContentList){
|
||||||
|
clearTimeout(time)
|
||||||
let value = {
|
let value = {
|
||||||
page:data.currentPage,
|
page:data.currentPage,
|
||||||
size:data.pageSize,
|
size:data.pageSize,
|
||||||
projectId: data.projectData.id,
|
projectId: data.projectData?.value,
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
|
Https.axiosPost(Https.httpUrls.cloudPage,value).then((rv)=>{
|
||||||
data.contentList = rv.content
|
data.contentList = rv.content
|
||||||
@@ -268,7 +298,7 @@ export default defineComponent({
|
|||||||
let arr = rv.content
|
let arr = rv.content
|
||||||
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
|
let result = arr.some((item:any) => (item.process !== '100.00%' && item.status !== 1));
|
||||||
if(!result)data.isGetContentList = false
|
if(!result)data.isGetContentList = false
|
||||||
setTimeout(()=>{
|
time = setTimeout(()=>{
|
||||||
getContentList()
|
getContentList()
|
||||||
},1500)
|
},1500)
|
||||||
})
|
})
|
||||||
@@ -298,9 +328,16 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
},1000)
|
},1000)
|
||||||
}
|
}
|
||||||
const submitGetContentList = ()=>{
|
const submitGetContentList = (project:any)=>{
|
||||||
data.isGetContentList = true
|
data.isGetContentList = true
|
||||||
|
if(project){
|
||||||
|
data.projectData = project
|
||||||
|
}else{
|
||||||
|
data.projectData = null
|
||||||
|
}
|
||||||
|
data.currentPage = 1
|
||||||
getContentList()
|
getContentList()
|
||||||
|
if(data.settingGetHistory)data.settingGetHistory()
|
||||||
}
|
}
|
||||||
const handleChange = (event:any,value:any)=>{
|
const handleChange = (event:any,value:any)=>{
|
||||||
data.createData = value
|
data.createData = value
|
||||||
@@ -311,9 +348,12 @@ export default defineComponent({
|
|||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
data.isGetContentList = true
|
data.isGetContentList = true
|
||||||
if(route.query?.id){
|
if(route.query?.id){
|
||||||
data.projectData.value = route.query?.id
|
data.projectData = {
|
||||||
data.projectData.label = route.query?.name
|
value:route.query?.id,
|
||||||
|
label:route.query?.name,
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
getContentList()
|
||||||
// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
|
// if(route.query?.type == 'creation')dataDom.createCloud.init(data.projectData)
|
||||||
})
|
})
|
||||||
return{
|
return{
|
||||||
@@ -325,6 +365,7 @@ export default defineComponent({
|
|||||||
submitGetContentList,
|
submitGetContentList,
|
||||||
handleChange,
|
handleChange,
|
||||||
getHistoryProjectList,
|
getHistoryProjectList,
|
||||||
|
pagination,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
|
|||||||
@@ -106,7 +106,10 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
watch(()=>data.selectObject.id,(newValue,oldValue)=>{
|
watch(()=>data.selectObject.id,(newValue,oldValue)=>{
|
||||||
if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
|
if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
|
||||||
getChatHistory(newValue)
|
data.chatList = []
|
||||||
|
nextTick(()=>{
|
||||||
|
getChatHistory(newValue)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const inputText = (e:any)=>{
|
const inputText = (e:any)=>{
|
||||||
@@ -168,6 +171,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
emit('chatChange',{type:eventData.type,module:getData})
|
emit('chatChange',{type:eventData.type,module:getData})
|
||||||
|
|
||||||
|
}else if(eventData.type == "design_control_signal"){
|
||||||
|
emit('chatChange',{type:eventData.type,design:true})
|
||||||
}
|
}
|
||||||
//emit('chatChange',{type:JSON.parse(event.data).status})
|
//emit('chatChange',{type:JSON.parse(event.data).status})
|
||||||
};
|
};
|
||||||
@@ -182,6 +187,7 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
const getChatHistory = (objectId:number)=>{
|
const getChatHistory = (objectId:number)=>{
|
||||||
|
if(!data.isFinish)return
|
||||||
let value = {
|
let value = {
|
||||||
projectId:objectId,
|
projectId:objectId,
|
||||||
page:1,
|
page:1,
|
||||||
|
|||||||
@@ -28,11 +28,17 @@
|
|||||||
<div>Setting</div>
|
<div>Setting</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="collectionBox">
|
<div class="collectionBox">
|
||||||
<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard'"></MoodboardUpload>
|
<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
|
||||||
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
|
<PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
|
||||||
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
|
<ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
|
||||||
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
|
<SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
|
||||||
<mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
|
<mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
|
||||||
|
</div>
|
||||||
|
<div class="collection_page">
|
||||||
|
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
||||||
|
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
|
||||||
|
<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
<div class="mark_loading" v-show="isShowMark">
|
||||||
@@ -66,6 +72,7 @@ export default defineComponent({
|
|||||||
habitSetStyle:false,
|
habitSetStyle:false,
|
||||||
isShowMark:false,
|
isShowMark:false,
|
||||||
openType:'',
|
openType:'',
|
||||||
|
collectionStep:1,
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
})
|
})
|
||||||
let driver__:any = computed(()=>{
|
let driver__:any = computed(()=>{
|
||||||
@@ -82,12 +89,15 @@ export default defineComponent({
|
|||||||
const init = (value:any)=>{
|
const init = (value:any)=>{
|
||||||
data.habitSetStyle = true
|
data.habitSetStyle = true
|
||||||
data.openType = value
|
data.openType = value
|
||||||
|
const keys = Object.keys(dataDom);
|
||||||
|
data.collectionStep = keys.indexOf(value) + 1; // 1
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
dataDom[value].openSetData()
|
dataDom[value].openSetData()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
let cleardata = ()=>{
|
let cleardata = ()=>{
|
||||||
data.habitSetStyle = false
|
data.habitSetStyle = false
|
||||||
|
data.collectionStep = 1
|
||||||
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
||||||
saveProject(data.openType)
|
saveProject(data.openType)
|
||||||
}
|
}
|
||||||
@@ -104,11 +114,32 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
let lastStep = ()=>{
|
||||||
|
data.collectionStep = data.collectionStep - 1
|
||||||
|
setOpenSetData()
|
||||||
|
}
|
||||||
|
let nextStep = ()=>{
|
||||||
|
data.collectionStep = data.collectionStep + 1
|
||||||
|
setOpenSetData()
|
||||||
|
}
|
||||||
|
const setOpenSetData = ()=>{
|
||||||
|
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
||||||
|
saveProject(data.openType)
|
||||||
|
|
||||||
|
const keys = Object.keys(dataDom);
|
||||||
|
const key = keys[data.collectionStep - 1];
|
||||||
|
data.openType = key
|
||||||
|
nextTick(()=>{
|
||||||
|
dataDom[key].openSetData()
|
||||||
|
})
|
||||||
|
}
|
||||||
return{
|
return{
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
cleardata,
|
cleardata,
|
||||||
init,
|
init,
|
||||||
|
lastStep,
|
||||||
|
nextStep,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
@@ -125,6 +156,32 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
> .collection_page{
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: -4rem;
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
.fi-rr-arrow-small-left{
|
||||||
|
margin-right: calc(10rem*1.2);
|
||||||
|
}
|
||||||
|
.fi{
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.fi::before{
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: rgba(0, 0, 0, 0.55);
|
||||||
|
border: solid 2px rgba(0, 0, 0, 0.25);
|
||||||
|
transition: 1s all;
|
||||||
|
}
|
||||||
|
.fi:hover.fi::before{
|
||||||
|
border: solid 2px rgba(0, 0, 0, 0.55);
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
.collectionBox{
|
.collectionBox{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@@ -31,7 +31,6 @@
|
|||||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
||||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -72,7 +71,7 @@
|
|||||||
</a-slider>
|
</a-slider>
|
||||||
<input type="number" readonly v-model="productimgBrightenValue">
|
<input type="number" readonly v-model="productimgBrightenValue">
|
||||||
</div>
|
</div>
|
||||||
<div class="input_border productImg_content_item_generate">
|
<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
|
||||||
<div class="input_box">
|
<div class="input_box">
|
||||||
<div class="input_box_btnBox">
|
<div class="input_box_btnBox">
|
||||||
<input
|
<input
|
||||||
@@ -92,7 +91,37 @@
|
|||||||
></textarea>
|
></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="productImg_content_item_generate_btn input_border">
|
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
|
||||||
|
<div class="head">
|
||||||
|
<div class="text">Choose pose</div>
|
||||||
|
</div>
|
||||||
|
<div class="imgBox" v-mousewheel>
|
||||||
|
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||||
|
<img :src="item.firstFrame"
|
||||||
|
alt=""
|
||||||
|
@mouseenter.stop="gifPlay($event,item)"
|
||||||
|
@mouseleave.stop="gifPause($event,item)"
|
||||||
|
>
|
||||||
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="generage_btn_box" style="margin-left: auto;">
|
||||||
|
<div class="generage_btn started_btn" v-show="!generateSuccess.productimgIsProductimg">
|
||||||
|
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
|
||||||
|
<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
||||||
|
<div class="content" v-show="speedState">
|
||||||
|
<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
|
||||||
|
<i class="fi fi-br-loading" ></i>
|
||||||
|
</div>
|
||||||
|
<div class="generage_btn started_btn" v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg">
|
||||||
|
{{$t('Generate.Close')}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="productImg_content_item_generate_btn input_border">
|
||||||
<div class="input_box">
|
<div class="input_box">
|
||||||
<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||||
{{ $t('Generate.Generate') }}
|
{{ $t('Generate.Generate') }}
|
||||||
@@ -104,16 +133,25 @@
|
|||||||
{{$t('Generate.Close')}}
|
{{$t('Generate.Close')}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
|
||||||
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
|
<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl || generateSuccess?.productImage">
|
||||||
<div class="loadBox" v-show="generateSuccess">
|
<div class="loadBox" v-show="generateSuccess">
|
||||||
<div class="load" v-show="generateSuccess.productimgIsProductimg">
|
<div class="load" v-show="generateSuccess.productimgIsProductimg">
|
||||||
<a-spin size="large" class="content_img_flex"></a-spin>
|
<a-spin size="large" class="content_img_flex"></a-spin>
|
||||||
</div>
|
</div>
|
||||||
<img v-show="!generateSuccess.productimgIsProductimg" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url">
|
<div class="imgBox" v-show="!generateSuccess.productimgIsProductimg">
|
||||||
|
<img v-show="scaleImageList[scaleImageIndex]?.resultType !='PoseTransfer'" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url" alt="">
|
||||||
|
<img
|
||||||
|
v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'"
|
||||||
|
:src="generateSuccess.newData?.firstFrameUrl || generateSuccess.firstFrameUrl"
|
||||||
|
alt=""
|
||||||
|
@mouseenter.stop="gifPlay($event,generateSuccess.newData || generateSuccess)"
|
||||||
|
@mouseleave.stop="gifPause($event,generateSuccess.newData || generateSuccess)"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="img_operate_block" v-if="isLike">
|
<div class="img_operate_block" v-if="isLike">
|
||||||
@@ -148,7 +186,7 @@ import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "v
|
|||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { Modal } from "ant-design-vue";
|
import { Modal } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { downloadIamge } from "@/tool/util";
|
import { downloadIamge,getMinioUrl } from "@/tool/util";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
|
||||||
@@ -194,7 +232,39 @@ setup(props:any,{emit}) {
|
|||||||
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
productimgRelightDirectionList:props.productData.RelightDirectionList,
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
generateSuccess:null as any,//生成成功后返回的数据
|
generateSuccess:null as any,//生成成功后返回的数据
|
||||||
|
poseList:[],
|
||||||
|
selectPose:null as any,
|
||||||
})
|
})
|
||||||
|
let speed = reactive({
|
||||||
|
speedList:[
|
||||||
|
{
|
||||||
|
title:'Generate high-quality images',
|
||||||
|
label:'High',
|
||||||
|
value:'',
|
||||||
|
},{
|
||||||
|
title:'Generate using Wanxiang',
|
||||||
|
label:'WX',
|
||||||
|
value:'wx',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
speedState:false,
|
||||||
|
speedData:{
|
||||||
|
title:'Generate high-quality images',
|
||||||
|
label:'High',
|
||||||
|
value:'',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const openSpeed = ()=>{
|
||||||
|
speed.speedState = !speed.speedState
|
||||||
|
if(speed.speedState){
|
||||||
|
document.addEventListener('click',openSpeed)
|
||||||
|
}else{
|
||||||
|
document.removeEventListener('click',openSpeed)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const setSpeed = (item:any)=>{
|
||||||
|
speed.speedData = item
|
||||||
|
}
|
||||||
let scaleImage: any = ref(false);
|
let scaleImage: any = ref(false);
|
||||||
let isShowMark = ref(false)
|
let isShowMark = ref(false)
|
||||||
let loadingShow = ref(false)
|
let loadingShow = ref(false)
|
||||||
@@ -226,11 +296,19 @@ setup(props:any,{emit}) {
|
|||||||
elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
|
elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
|
||||||
elementType:'ToProductImage',
|
elementType:'ToProductImage',
|
||||||
}
|
}
|
||||||
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
|
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
|
||||||
|
|
||||||
}
|
}
|
||||||
return obj
|
return obj
|
||||||
}
|
}
|
||||||
|
const getPoseTransformData = ()=>{
|
||||||
|
return {
|
||||||
|
poseId:productimg.selectPose,
|
||||||
|
projectId:productimg.selectObject.id,
|
||||||
|
productImage:getMinioUrl(scaleImageList.value[scaleImageIndex.value].sourceUrl),
|
||||||
|
modelName:speed.speedData.value,
|
||||||
|
}
|
||||||
|
}
|
||||||
let getPrductimg = ()=>{
|
let getPrductimg = ()=>{
|
||||||
let obj = getData()
|
let obj = getData()
|
||||||
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
|
let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
|
||||||
@@ -250,18 +328,25 @@ setup(props:any,{emit}) {
|
|||||||
let url = Https.httpUrls.relight
|
let url = Https.httpUrls.relight
|
||||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||||
url = Https.httpUrls.toProduct
|
url = Https.httpUrls.toProduct
|
||||||
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
|
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
|
||||||
url = Https.httpUrls.poseTransform
|
url = Https.httpUrls.poseTransform
|
||||||
|
data = getPoseTransformData()
|
||||||
}
|
}
|
||||||
|
// setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
|
||||||
|
// return
|
||||||
productimg.generateSuccess.isShowMark = true
|
productimg.generateSuccess.isShowMark = true
|
||||||
Https.axiosPost(url, data).then(
|
Https.axiosPost(url, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
productimg.generateSuccess.isShowMark = false
|
productimg.generateSuccess.isShowMark = false
|
||||||
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
|
||||||
let arr:any = []
|
let arr:any = []
|
||||||
rv.forEach((item:any)=>{
|
if(scaleImageList.value[scaleImageIndex.value]?.resultType != 'PoseTransfer'){
|
||||||
arr.push(item.taskId)
|
rv.forEach((item:any)=>{
|
||||||
})
|
arr.push(item.taskId)
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
arr.push(rv)
|
||||||
|
}
|
||||||
if(productimg.generateSuccess?.isIndex || productimg.generateSuccess?.isIndex == 0)emit('setGenerateAwait',{index:productimg.generateSuccess.isIndex,listType:productimg.generateSuccess.listType})
|
if(productimg.generateSuccess?.isIndex || productimg.generateSuccess?.isIndex == 0)emit('setGenerateAwait',{index:productimg.generateSuccess.isIndex,listType:productimg.generateSuccess.listType})
|
||||||
setPrductimg(arr)
|
setPrductimg(arr)
|
||||||
productimg.isGenerate = true
|
productimg.isGenerate = true
|
||||||
@@ -300,14 +385,22 @@ setup(props:any,{emit}) {
|
|||||||
let url = Https.httpUrls.relightResult
|
let url = Https.httpUrls.relightResult
|
||||||
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
|
||||||
url = Https.httpUrls.toProductImageResult
|
url = Https.httpUrls.toProductImageResult
|
||||||
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
|
}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
|
||||||
url = Https.httpUrls.poseTransformResult
|
url = Https.httpUrls.poseTransformResult
|
||||||
|
data = {
|
||||||
|
taskId:dataList[0],
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
// url = Https.httpUrls.poseTransformResult
|
||||||
|
// data = {taskId:'f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83'}
|
||||||
productimg.generateSuccess.prductimgTime = setInterval(()=>{
|
productimg.generateSuccess.prductimgTime = setInterval(()=>{
|
||||||
if(!state)return
|
if(!state)return
|
||||||
state = false
|
state = false
|
||||||
Https.axiosPost(url, data).then(
|
Https.axiosPost(url, data).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
|
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
|
||||||
|
rv = [rv]
|
||||||
|
}
|
||||||
state = true
|
state = true
|
||||||
if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
|
if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
|
||||||
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
|
||||||
@@ -316,6 +409,7 @@ setup(props:any,{emit}) {
|
|||||||
// let id = productimg.generateSuccess?.designItemId || rv[0].id
|
// let id = productimg.generateSuccess?.designItemId || rv[0].id
|
||||||
// rv[0].id = id
|
// rv[0].id = id
|
||||||
// let listType = productimg.generateSuccess.listType
|
// let listType = productimg.generateSuccess.listType
|
||||||
|
rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
|
||||||
rv[0].designOutfitUrl = rv[0].url
|
rv[0].designOutfitUrl = rv[0].url
|
||||||
productimg.generateSuccess.newData = rv[0]
|
productimg.generateSuccess.newData = rv[0]
|
||||||
if(productimg.generateSuccess?.scaleImage){
|
if(productimg.generateSuccess?.scaleImage){
|
||||||
@@ -327,7 +421,7 @@ setup(props:any,{emit}) {
|
|||||||
}else if(rv[0].status == 'Fail'){
|
}else if(rv[0].status == 'Fail'){
|
||||||
isEnd = true
|
isEnd = true
|
||||||
}
|
}
|
||||||
generateProceedList = data
|
generateProceedList = rv
|
||||||
if(isEnd){
|
if(isEnd){
|
||||||
store.state.store.dispatch('getCredits')
|
store.state.store.dispatch('getCredits')
|
||||||
clearInterval(productimg.generateSuccess.prductimgTime)
|
clearInterval(productimg.generateSuccess.prductimgTime)
|
||||||
@@ -351,7 +445,7 @@ setup(props:any,{emit}) {
|
|||||||
delete productimg.generateSuccess.remPrductimgTime
|
delete productimg.generateSuccess.remPrductimgTime
|
||||||
delete productimg.generateSuccess.prductimgTime
|
delete productimg.generateSuccess.prductimgTime
|
||||||
});
|
});
|
||||||
},1000)
|
},scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'?20000:1000)
|
||||||
}
|
}
|
||||||
let removeProductimg = ()=>{
|
let removeProductimg = ()=>{
|
||||||
productimg.generateSuccess.productimgIsProductimg = false
|
productimg.generateSuccess.productimgIsProductimg = false
|
||||||
@@ -361,13 +455,20 @@ setup(props:any,{emit}) {
|
|||||||
delete productimg.generateSuccess.productimgRemProductimg
|
delete productimg.generateSuccess.productimgRemProductimg
|
||||||
delete productimg.generateSuccess.prductimgTime
|
delete productimg.generateSuccess.prductimgTime
|
||||||
if(generateProceedList){
|
if(generateProceedList){
|
||||||
// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
|
// let str = generateProceedList.length > 1?generateProceedList.join(',')
|
||||||
let str = generateProceedList.join(',')
|
|
||||||
let data = {
|
let data = {
|
||||||
uniqueId:str,
|
uniqueId:generateProceedList,
|
||||||
userId:userDetail.value.userId,
|
userId:userDetail.value.userId,
|
||||||
type:scaleImageList.value[scaleImageIndex.value]?.resultType
|
type:scaleImageList.value[scaleImageIndex.value]?.resultType
|
||||||
}
|
}
|
||||||
|
if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
|
||||||
|
// data = {
|
||||||
|
// uniqueId:data.waitList,
|
||||||
|
// userId:store.state.UserHabit.userDetail.userId,
|
||||||
|
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
// type: 'PoseTransferation'
|
||||||
|
// }
|
||||||
|
}
|
||||||
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
generateProceedList = []
|
generateProceedList = []
|
||||||
@@ -379,6 +480,7 @@ setup(props:any,{emit}) {
|
|||||||
let setCove = ()=>{
|
let setCove = ()=>{
|
||||||
let data = {
|
let data = {
|
||||||
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
|
...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
|
||||||
|
sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
|
||||||
oldId:productimg.generateSuccess.id,
|
oldId:productimg.generateSuccess.id,
|
||||||
status:productimg.generateSuccess.status,
|
status:productimg.generateSuccess.status,
|
||||||
listType:productimg.generateSuccess.listType,
|
listType:productimg.generateSuccess.listType,
|
||||||
@@ -390,12 +492,25 @@ setup(props:any,{emit}) {
|
|||||||
|
|
||||||
delete productimg.generateSuccess.listType
|
delete productimg.generateSuccess.listType
|
||||||
}
|
}
|
||||||
let setAdd = ()=>{
|
const getPoseList = ()=>{
|
||||||
|
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
|
||||||
|
rv[0].isChecked = true
|
||||||
|
productimg.selectPose = rv[0]?.id || 1
|
||||||
|
productimg.poseList = rv
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const gifPlay = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.gif || item.gifUrl//使用gif图片
|
||||||
|
}
|
||||||
|
const gifPause = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
...toRefs(productimg),
|
...toRefs(productimg),
|
||||||
|
...toRefs(speed),
|
||||||
|
openSpeed,
|
||||||
|
setSpeed,
|
||||||
scaleImage,
|
scaleImage,
|
||||||
isShowMark,
|
isShowMark,
|
||||||
loadingShow,
|
loadingShow,
|
||||||
@@ -410,7 +525,9 @@ setup(props:any,{emit}) {
|
|||||||
getPrductimg,
|
getPrductimg,
|
||||||
removeProductimg,
|
removeProductimg,
|
||||||
setCove,
|
setCove,
|
||||||
setAdd,
|
getPoseList,
|
||||||
|
gifPlay,
|
||||||
|
gifPause,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -455,6 +572,9 @@ methods: {
|
|||||||
this.generateSuccess.remPrductimgTime = this.generateSuccess.remPrductimgTime?this.generateSuccess.remPrductimgTime:null
|
this.generateSuccess.remPrductimgTime = this.generateSuccess.remPrductimgTime?this.generateSuccess.remPrductimgTime:null
|
||||||
this.generateSuccess.prductimgTime = this.generateSuccess.prductimgTime?this.generateSuccess.prductimgTime:null
|
this.generateSuccess.prductimgTime = this.generateSuccess.prductimgTime?this.generateSuccess.prductimgTime:null
|
||||||
this.scaleImage = true
|
this.scaleImage = true
|
||||||
|
if(this.poseList.length == 0){
|
||||||
|
this.getPoseList()
|
||||||
|
}
|
||||||
// if(status == 'edit'){
|
// if(status == 'edit'){
|
||||||
// this.generateSuccess = {
|
// this.generateSuccess = {
|
||||||
// ...list[index],
|
// ...list[index],
|
||||||
@@ -635,6 +755,7 @@ overflow: visible !important;
|
|||||||
margin-bottom: 6rem;
|
margin-bottom: 6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scaleImage_content{
|
.scaleImage_content{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -647,7 +768,7 @@ overflow: visible !important;
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
.productImg_left{
|
.productImg_left{
|
||||||
width: 100%;
|
width: 24rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -665,6 +786,45 @@ overflow: visible !important;
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
.transferPose{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
> .imgBox{
|
||||||
|
flex: 1;
|
||||||
|
max-height: 45rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
> .item{
|
||||||
|
margin-right: 1rem;
|
||||||
|
width: calc(100% / 1.2 - .5rem);
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 25rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
:deep(.ant-checkbox-wrapper){
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
}
|
||||||
|
> img{
|
||||||
|
width: 80%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .upload_item{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.productImg_content_item_similarity{
|
.productImg_content_item_similarity{
|
||||||
padding-bottom: 2.4rem;
|
padding-bottom: 2.4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -692,6 +852,9 @@ overflow: visible !important;
|
|||||||
min-width: 40rem;
|
min-width: 40rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
> .imgBox{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
img{
|
img{
|
||||||
|
|||||||
@@ -103,6 +103,11 @@
|
|||||||
likeDesignCollectionList,
|
likeDesignCollectionList,
|
||||||
'like'
|
'like'
|
||||||
)">
|
)">
|
||||||
|
<img class="content_img"
|
||||||
|
v-if="design.resultType == 'PoseTransfer'"
|
||||||
|
:src="design.firstFrameUrl" alt=""
|
||||||
|
@mouseenter.stop="gifPlay($event,design)"
|
||||||
|
@mouseleave.stop="gifPause($event,design)" >
|
||||||
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
|
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
|
||||||
:key="design.designOutfitUrl" designType="like" :index="index"/>
|
:key="design.designOutfitUrl" designType="like" :index="index"/>
|
||||||
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
||||||
@@ -115,7 +120,7 @@
|
|||||||
<div class="icon iconfont icon-jushoucanggift icon_like">
|
<div class="icon iconfont icon-jushoucanggift icon_like">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
|
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'PoseTransfer','add','like')">
|
||||||
<div class="text">Transfer Pose</div>
|
<div class="text">Transfer Pose</div>
|
||||||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -168,6 +173,11 @@
|
|||||||
designCollectionList,
|
designCollectionList,
|
||||||
'disLike'
|
'disLike'
|
||||||
)">
|
)">
|
||||||
|
<img class="content_img"
|
||||||
|
v-if="design.resultType == 'PoseTransfer'"
|
||||||
|
:src="design.firstFrameUrl" alt=""
|
||||||
|
@mouseenter.stop="gifPlay($event,design)"
|
||||||
|
@mouseleave.stop="gifPause($event,design)" >
|
||||||
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
|
<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
|
||||||
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
<a-spin v-show="design?.generateAwait" size="large"></a-spin>
|
||||||
</div>
|
</div>
|
||||||
@@ -179,7 +189,7 @@
|
|||||||
<div class="icon iconfont icon-jushoucang icon_like">
|
<div class="icon iconfont icon-jushoucang icon_like">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
|
<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'PoseTransfer','add','disLike')">
|
||||||
<div class="text">Transfer Pose</div>
|
<div class="text">Transfer Pose</div>
|
||||||
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
<div class="icon iconfont icon-jushoucanggift icon_like"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -647,8 +657,8 @@ export default defineComponent({
|
|||||||
index: posiitonData.value.generateElList.length,
|
index: posiitonData.value.generateElList.length,
|
||||||
userLikeSortId:value.designItemId||value.id
|
userLikeSortId:value.designItemId||value.id
|
||||||
});
|
});
|
||||||
setDesignItemStyle()
|
|
||||||
}
|
}
|
||||||
|
setDesignItemStyle()
|
||||||
setSystemDesigner(100)
|
setSystemDesigner(100)
|
||||||
// moveItem('disLike');
|
// moveItem('disLike');
|
||||||
})
|
})
|
||||||
@@ -704,6 +714,7 @@ export default defineComponent({
|
|||||||
dataDom.editDesignType.isComparison = true
|
dataDom.editDesignType.isComparison = true
|
||||||
}
|
}
|
||||||
const addGenerateImg = (data:any)=>{
|
const addGenerateImg = (data:any)=>{
|
||||||
|
console.log(data)
|
||||||
if(!data.id)return
|
if(!data.id)return
|
||||||
let obj = {
|
let obj = {
|
||||||
id:data.id,
|
id:data.id,
|
||||||
@@ -716,6 +727,8 @@ export default defineComponent({
|
|||||||
elementId:data.elementId,
|
elementId:data.elementId,
|
||||||
elementType:data.elementType,
|
elementType:data.elementType,
|
||||||
userGroupId:data.userGroupId || data.id,
|
userGroupId:data.userGroupId || data.id,
|
||||||
|
firstFrameUrl:data.firstFrameUrl,
|
||||||
|
gifUrl:data.gifUrl,
|
||||||
}
|
}
|
||||||
let list = []
|
let list = []
|
||||||
if(data.listType == 'disLike'){
|
if(data.listType == 'disLike'){
|
||||||
@@ -760,13 +773,29 @@ export default defineComponent({
|
|||||||
let data = {
|
let data = {
|
||||||
toProductImageResultId:[(design.designItemId || design.id)],
|
toProductImageResultId:[(design.designItemId || design.id)],
|
||||||
projectId: store.state.Workspace.probjects.id,
|
projectId: store.state.Workspace.probjects.id,
|
||||||
}
|
} as any
|
||||||
|
let params = {} as any
|
||||||
if(type == 'ToProductImage' || type == 'Relight'){
|
if(type == 'ToProductImage' || type == 'Relight'){
|
||||||
if(str == 'like'){
|
if(str == 'like'){
|
||||||
url = Https.httpUrls.productImageLike
|
url = Https.httpUrls.productImageLike
|
||||||
}else{
|
}else{
|
||||||
url = Https.httpUrls.productImageUnLike
|
url = Https.httpUrls.productImageUnLike
|
||||||
}
|
}
|
||||||
|
}else if(type == 'PoseTransfer'){
|
||||||
|
url = Https.httpUrls.poselikeOrDisike
|
||||||
|
if(str == 'like'){
|
||||||
|
params = {
|
||||||
|
likeOrDislike:'like',
|
||||||
|
transformedId:design.id,
|
||||||
|
projectId:store.state.Workspace.probjects.id,
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
params = {
|
||||||
|
likeOrDislike:'dislike',
|
||||||
|
transformedId:design.id,
|
||||||
|
projectId:store.state.Workspace.probjects.id,
|
||||||
|
}
|
||||||
|
}
|
||||||
}else{
|
}else{
|
||||||
if(str == 'like'){
|
if(str == 'like'){
|
||||||
url = Https.httpUrls.productImageLike
|
url = Https.httpUrls.productImageLike
|
||||||
@@ -775,7 +804,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
designData.likeLoading = true;
|
designData.likeLoading = true;
|
||||||
Https.axiosPost(url, data).then(
|
Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
if(str == 'like'){
|
if(str == 'like'){
|
||||||
let value:any = {
|
let value:any = {
|
||||||
@@ -863,6 +892,12 @@ export default defineComponent({
|
|||||||
list[data.index].generateAwait = true;
|
list[data.index].generateAwait = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
const gifPlay = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.gif || item.gifUrl//使用gif图片
|
||||||
|
}
|
||||||
|
const gifPause = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
...toRefs(editDesignType),
|
...toRefs(editDesignType),
|
||||||
@@ -915,6 +950,8 @@ export default defineComponent({
|
|||||||
setNoDesignLike,
|
setNoDesignLike,
|
||||||
upDataLikeListType,
|
upDataLikeListType,
|
||||||
setGenerateAwait,
|
setGenerateAwait,
|
||||||
|
gifPlay,
|
||||||
|
gifPause,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -985,6 +1022,12 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.observerData.observer.observe(this.$refs.rightContentBlockBox);
|
this.observerData.observer.observe(this.$refs.rightContentBlockBox);
|
||||||
|
if(this.designCollectionList?.length > 0){
|
||||||
|
nextTick(()=>{
|
||||||
|
this.setDesignItemStyle()
|
||||||
|
this.setShowHide('recycleDomHidden')
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
mousewheel:{
|
mousewheel:{
|
||||||
@@ -1743,7 +1786,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
.designPage_left_content {
|
.designPage_left_content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 55rem;
|
width: 50rem;
|
||||||
|
// width: 55rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
// transition: all .3s;
|
// transition: all .3s;
|
||||||
padding-right: 1.2rem;
|
padding-right: 1.2rem;
|
||||||
@@ -1804,7 +1848,7 @@ export default defineComponent({
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
&.active{
|
&.active{
|
||||||
right: 43rem;
|
right: 53rem;
|
||||||
transform: translate(0, -50%);
|
transform: translate(0, -50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1862,7 +1906,7 @@ export default defineComponent({
|
|||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
.right_content_body {
|
.right_content_body {
|
||||||
width: 45rem;
|
width: 55rem;
|
||||||
// width: 55rem;
|
// width: 55rem;
|
||||||
.right_content_img_block{
|
.right_content_img_block{
|
||||||
|
|
||||||
@@ -1986,11 +2030,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content_img {
|
.content_img {
|
||||||
// max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// max-height: 100%;
|
// object-fit: contain;
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn{
|
.btn{
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<router-view v-if="(openType && openType != 'history' && !routeQuery.id) || $route.path != '/home'" @setTask="setTask">
|
<router-view v-if="(openType && openType != 'history' && !routeQuery.id) || $route.path != '/home'" @setTask="setTask">
|
||||||
</router-view>
|
</router-view>
|
||||||
<div v-else-if="routeQuery.id || openType == 'history'" class="function">
|
<div v-else-if="routeQuery.id || openType == 'history'" class="function">
|
||||||
<design ref="design"></design>
|
<design :key="componentKey" ref="design"></design>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="function">
|
<div v-else class="function">
|
||||||
<newPorject ref="newPorject" @newProject=newProject></newPorject>
|
<newPorject ref="newPorject" @newProject=newProject></newPorject>
|
||||||
@@ -38,6 +38,7 @@ export default defineComponent({
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
openType:'',
|
openType:'',
|
||||||
|
componentKey:null,
|
||||||
isShowMark:false,
|
isShowMark:false,
|
||||||
routeQuery:{} as any,
|
routeQuery:{} as any,
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
|
||||||
@@ -57,6 +58,7 @@ export default defineComponent({
|
|||||||
watch(() => route.query,
|
watch(() => route.query,
|
||||||
(query:any, oldQuery:any) => {
|
(query:any, oldQuery:any) => {
|
||||||
data.routeQuery = query
|
data.routeQuery = query
|
||||||
|
if(query.history)data.componentKey = query.history
|
||||||
const key = Object.keys(query)?.[0]
|
const key = Object.keys(query)?.[0]
|
||||||
if(key){
|
if(key){
|
||||||
data.openType = Object.keys(query)[0]
|
data.openType = Object.keys(query)[0]
|
||||||
@@ -66,11 +68,14 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
// if((query.history || query.id) != (oldQuery.history || oldQuery.id)){
|
// if((query.history || query.id) != (oldQuery.history || oldQuery.id)){
|
||||||
// }
|
// }
|
||||||
|
if(query.history && query.history != query.history){
|
||||||
|
|
||||||
|
}
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
if(query.history || query.id){
|
if(query.history || query.id){
|
||||||
if(data.openType == 'tools')data.isShowMark = true
|
if(data.openType == 'tools')data.isShowMark = true
|
||||||
data.dataLoad = true
|
data.dataLoad = true
|
||||||
createData()
|
if(query?.source != 'batch')createData()
|
||||||
if(query.type == 'Works'){
|
if(query.type == 'Works'){
|
||||||
getWorks(query.id || query.history)
|
getWorks(query.id || query.history)
|
||||||
}else{
|
}else{
|
||||||
@@ -268,6 +273,9 @@ export default defineComponent({
|
|||||||
dataDom.design.openSetData()
|
dataDom.design.openSetData()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
}).catch(()=>{
|
||||||
|
data.isShowMark = false
|
||||||
|
data.dataLoad = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
const getCanvasData = (str:any)=>{
|
const getCanvasData = (str:any)=>{
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="generate input_border">
|
<div class="generage_btn_box" style="margin-left: auto;">
|
||||||
<!-- <div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
|
<!-- <div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
|
||||||
{{ $t('Generate.Generate') }}
|
{{ $t('Generate.Generate') }}
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
<poseTransfer v-if="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
|
<poseTransfer v-if="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
|
||||||
<deReconstruction v-if="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
|
<deReconstruction v-if="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
|
||||||
<patternMaking3D v-if="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
|
<patternMaking3D v-if="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
|
||||||
<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload" :config="editorConfig"></canvasUpload>
|
<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload" :config="ceditorConfig"></canvasUpload>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -37,10 +37,10 @@
|
|||||||
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
|
<span :title="childItem.name" v-show="!childItem.editName">{{ childItem.name }}</span>
|
||||||
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
|
<textarea v-model="historyData.historyTextarea" v-show="childItem.editName" @click.stop></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="type">{{ childItem.process.replace('_', ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
|
<div class="type">{{ childItem.process.replace(/_/g, ' ').toLowerCase().replace(/\b\w/g, char => char.toUpperCase()) }}</div>
|
||||||
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
|
<div class="time">{{ childItem.updateTime.replace('T', ' ') }}</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event)"></i>
|
<i class="fi fi-br-menu-dots-vertical" v-show="!childItem.editName" @click.stop="editHistory(childItem,index,$event,item.list)"></i>
|
||||||
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
<i class="fi fi-br-check" v-show="childItem.editName" @click.stop="accomplishHistory(childItem,index,$event)"></i>
|
||||||
<div class="operation" v-show="historyData.selectHistoryIndex == index">
|
<div class="operation" v-show="historyData.selectHistoryIndex == index">
|
||||||
<div class="item" @click.stop="editName(childItem)">
|
<div class="item" @click.stop="editName(childItem)">
|
||||||
@@ -543,7 +543,7 @@ export default defineComponent({
|
|||||||
homeMainData.historyData.isNoData = true
|
homeMainData.historyData.isNoData = true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const editHistory = (item,index,el)=>{
|
const editHistory = (item,index,el,list)=>{
|
||||||
if(homeMainData.historyData.selectHistoryIndex == -1){
|
if(homeMainData.historyData.selectHistoryIndex == -1){
|
||||||
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
let top = el.target.parentNode.parentNode.getBoundingClientRect().top
|
||||||
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
let parentTop = el.target.parentNode.parentNode.parentNode.offsetTop
|
||||||
@@ -551,6 +551,10 @@ export default defineComponent({
|
|||||||
let operation = el.target.parentNode.querySelector('.operation')
|
let operation = el.target.parentNode.querySelector('.operation')
|
||||||
homeMainData.historyData.selectHistoryIndex = index
|
homeMainData.historyData.selectHistoryIndex = index
|
||||||
//判断弹窗是加载按钮上面还是下面
|
//判断弹窗是加载按钮上面还是下面
|
||||||
|
if(list.length == 1){
|
||||||
|
operation.classList.add('activeLeft')
|
||||||
|
return
|
||||||
|
}
|
||||||
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
if((parentTop+parentHeight)/2 < top){//加在按钮上面
|
||||||
operation.classList.add('active')
|
operation.classList.add('active')
|
||||||
}else{
|
}else{
|
||||||
@@ -1087,6 +1091,10 @@ export default defineComponent({
|
|||||||
top: auto;
|
top: auto;
|
||||||
bottom: 3rem;
|
bottom: 3rem;
|
||||||
}
|
}
|
||||||
|
&.activeLeft{
|
||||||
|
bottom: 0;
|
||||||
|
right: 3rem;
|
||||||
|
}
|
||||||
> .item{
|
> .item{
|
||||||
padding: .8rem;
|
padding: .8rem;
|
||||||
color: #52525b;
|
color: #52525b;
|
||||||
|
|||||||
Reference in New Issue
Block a user