fix
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 700 B After Width: | Height: | Size: 6.8 KiB |
@@ -721,13 +721,13 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item > input {
|
.generalModel_state .generalModel_state_item > input {
|
||||||
height: 2.5rem !important;
|
height: 6rem !important;
|
||||||
|
padding: 1rem !important;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: calc(2rem - 1px * 2) !important;
|
box-sizing: border-box;
|
||||||
box-sizing: content-box;
|
|
||||||
background-color: #f3f3f3;
|
background-color: #f3f3f3;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: calc(100% - 4rem);
|
width: 25rem;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
@@ -754,9 +754,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
width: calc(100% - 4rem);
|
width: calc(100% - 4rem);
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.generalModel_state .generalModel_state_item .ant-select-selector {
|
|
||||||
border-radius: 4rem;
|
|
||||||
}
|
|
||||||
.generalModel_state .generalModel_state_item .ant-picker-input > input {
|
.generalModel_state .generalModel_state_item .ant-picker-input > input {
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
@@ -898,6 +895,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
.generalModel.fullScreen > .ant-modal-body {
|
.generalModel.fullScreen > .ant-modal-body {
|
||||||
padding: 2.5rem 3rem;
|
padding: 2.5rem 3rem;
|
||||||
}
|
}
|
||||||
|
.generalModel.fullScreen .generalModel_btn .generalModel_closeIcon {
|
||||||
|
transform: translate(-100%, 100%);
|
||||||
|
}
|
||||||
.generalModel .ant-modal-content {
|
.generalModel .ant-modal-content {
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1165,18 +1165,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
z-index: 9999 !important;
|
z-index: 9999 !important;
|
||||||
top: 6rem;
|
top: 6rem;
|
||||||
}
|
}
|
||||||
.ant-modal-confirm-btns .ant-btn:hover {
|
|
||||||
color: #fff !important;
|
|
||||||
border-color: #39215b !important;
|
|
||||||
}
|
|
||||||
.ant-modal-confirm-btns .ant-btn-primary {
|
.ant-modal-confirm-btns .ant-btn-primary {
|
||||||
background: #39215b !important;
|
background: #000 !important;
|
||||||
border-color: #39215b !important;
|
border-color: #000 !important;
|
||||||
}
|
|
||||||
.ant-modal-confirm-btns .ant-btn-primary:hover {
|
|
||||||
color: #fff !important;
|
|
||||||
border-color: #543087 !important;
|
|
||||||
background: #543087 !important;
|
|
||||||
}
|
}
|
||||||
.ant-spin-dot-item {
|
.ant-spin-dot-item {
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
@@ -1617,6 +1608,7 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload {
|
.upload_item .upload_file_item .ant-upload-picture-card-wrapper .ant-upload-select-picture-card .fi-br-upload {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
.upload_item .upload_file_item.upload_file_item:last-child {
|
.upload_item .upload_file_item.upload_file_item:last-child {
|
||||||
@@ -1680,6 +1672,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border,
|
.design_detail_modal_component .input_border,
|
||||||
.library_page .input_border,
|
.library_page .input_border,
|
||||||
.productImg_content .input_border,
|
.productImg_content .input_border,
|
||||||
|
.poseTransfer .input_border,
|
||||||
.scaleImage_modal .input_border,
|
.scaleImage_modal .input_border,
|
||||||
.accountEdit_page .input_border,
|
.accountEdit_page .input_border,
|
||||||
.generalMenu_printModel_upload .input_border,
|
.generalMenu_printModel_upload .input_border,
|
||||||
@@ -1696,6 +1689,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box,
|
.design_detail_modal_component .input_border .input_box,
|
||||||
.library_page .input_border .input_box,
|
.library_page .input_border .input_box,
|
||||||
.productImg_content .input_border .input_box,
|
.productImg_content .input_border .input_box,
|
||||||
|
.poseTransfer .input_border .input_box,
|
||||||
.scaleImage_modal .input_border .input_box,
|
.scaleImage_modal .input_border .input_box,
|
||||||
.accountEdit_page .input_border .input_box,
|
.accountEdit_page .input_border .input_box,
|
||||||
.generalMenu_printModel_upload .input_border .input_box,
|
.generalMenu_printModel_upload .input_border .input_box,
|
||||||
@@ -1706,11 +1700,13 @@ textarea:focus {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box .inputShowText,
|
.collection_modal_body .input_border .input_box .inputShowText,
|
||||||
.design_detail_modal_component .input_border .input_box .inputShowText,
|
.design_detail_modal_component .input_border .input_box .inputShowText,
|
||||||
.library_page .input_border .input_box .inputShowText,
|
.library_page .input_border .input_box .inputShowText,
|
||||||
.productImg_content .input_border .input_box .inputShowText,
|
.productImg_content .input_border .input_box .inputShowText,
|
||||||
|
.poseTransfer .input_border .input_box .inputShowText,
|
||||||
.scaleImage_modal .input_border .input_box .inputShowText,
|
.scaleImage_modal .input_border .input_box .inputShowText,
|
||||||
.accountEdit_page .input_border .input_box .inputShowText,
|
.accountEdit_page .input_border .input_box .inputShowText,
|
||||||
.generalMenu_printModel_upload .input_border .input_box .inputShowText,
|
.generalMenu_printModel_upload .input_border .input_box .inputShowText,
|
||||||
@@ -1722,29 +1718,32 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
|
.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
|
||||||
.library_page .input_border .input_box.active .input_box_btnBox,
|
.library_page .input_border .input_box.active .input_box_btnBox,
|
||||||
.productImg_content .input_border .input_box.active .input_box_btnBox,
|
.productImg_content .input_border .input_box.active .input_box_btnBox,
|
||||||
|
.poseTransfer .input_border .input_box.active .input_box_btnBox,
|
||||||
.scaleImage_modal .input_border .input_box.active .input_box_btnBox,
|
.scaleImage_modal .input_border .input_box.active .input_box_btnBox,
|
||||||
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
|
.accountEdit_page .input_border .input_box.active .input_box_btnBox,
|
||||||
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
|
.generalMenu_printModel_upload .input_border .input_box.active .input_box_btnBox,
|
||||||
.generate .input_border .input_box.active .input_box_btnBox,
|
.generate .input_border .input_box.active .input_box_btnBox,
|
||||||
.collection_modal_body .input_border .input_box.active textarea,
|
.collection_modal_body .input_border .input_box.active .search_textarea,
|
||||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
.design_detail_modal_component .input_border .input_box.active .search_textarea,
|
||||||
.library_page .input_border .input_box.active textarea,
|
.library_page .input_border .input_box.active .search_textarea,
|
||||||
.productImg_content .input_border .input_box.active textarea,
|
.productImg_content .input_border .input_box.active .search_textarea,
|
||||||
.scaleImage_modal .input_border .input_box.active textarea,
|
.poseTransfer .input_border .input_box.active .search_textarea,
|
||||||
.accountEdit_page .input_border .input_box.active textarea,
|
.scaleImage_modal .input_border .input_box.active .search_textarea,
|
||||||
.generalMenu_printModel_upload .input_border .input_box.active textarea,
|
.accountEdit_page .input_border .input_box.active .search_textarea,
|
||||||
.generate .input_border .input_box.active textarea {
|
.generalMenu_printModel_upload .input_border .input_box.active .search_textarea,
|
||||||
|
.generate .input_border .input_box.active .search_textarea {
|
||||||
border: 1px solid #ff0001;
|
border: 1px solid #ff0001;
|
||||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box.active span,
|
.collection_modal_body .input_border .input_box.active .inputShowText,
|
||||||
.design_detail_modal_component .input_border .input_box.active span,
|
.design_detail_modal_component .input_border .input_box.active .inputShowText,
|
||||||
.library_page .input_border .input_box.active span,
|
.library_page .input_border .input_box.active .inputShowText,
|
||||||
.productImg_content .input_border .input_box.active span,
|
.productImg_content .input_border .input_box.active .inputShowText,
|
||||||
.scaleImage_modal .input_border .input_box.active span,
|
.poseTransfer .input_border .input_box.active .inputShowText,
|
||||||
.accountEdit_page .input_border .input_box.active span,
|
.scaleImage_modal .input_border .input_box.active .inputShowText,
|
||||||
.generalMenu_printModel_upload .input_border .input_box.active span,
|
.accountEdit_page .input_border .input_box.active .inputShowText,
|
||||||
.generate .input_border .input_box.active span {
|
.generalMenu_printModel_upload .input_border .input_box.active .inputShowText,
|
||||||
|
.generate .input_border .input_box.active .inputShowText {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255, 0, 0.7);
|
color: rgba(255, 0, 0.7);
|
||||||
@@ -1753,6 +1752,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword,
|
.design_detail_modal_component .input_border .search_keyword,
|
||||||
.library_page .input_border .search_keyword,
|
.library_page .input_border .search_keyword,
|
||||||
.productImg_content .input_border .search_keyword,
|
.productImg_content .input_border .search_keyword,
|
||||||
|
.poseTransfer .input_border .search_keyword,
|
||||||
.scaleImage_modal .input_border .search_keyword,
|
.scaleImage_modal .input_border .search_keyword,
|
||||||
.accountEdit_page .input_border .search_keyword,
|
.accountEdit_page .input_border .search_keyword,
|
||||||
.generalMenu_printModel_upload .input_border .search_keyword,
|
.generalMenu_printModel_upload .input_border .search_keyword,
|
||||||
@@ -1764,6 +1764,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center,
|
.library_page .input_border .search_keyword .search_keyword_center,
|
||||||
.productImg_content .input_border .search_keyword .search_keyword_center,
|
.productImg_content .input_border .search_keyword .search_keyword_center,
|
||||||
|
.poseTransfer .input_border .search_keyword .search_keyword_center,
|
||||||
.scaleImage_modal .input_border .search_keyword .search_keyword_center,
|
.scaleImage_modal .input_border .search_keyword .search_keyword_center,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center,
|
.accountEdit_page .input_border .search_keyword .search_keyword_center,
|
||||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center,
|
||||||
@@ -1784,6 +1785,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
|
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_left,
|
||||||
@@ -1797,6 +1799,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
|
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
|
||||||
@@ -1815,6 +1818,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.design_detail_modal_component .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.library_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.productImg_content .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
|
.poseTransfer .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.scaleImage_modal .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
.generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
|
||||||
@@ -1825,6 +1829,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box_btnBox,
|
.design_detail_modal_component .input_border .input_box_btnBox,
|
||||||
.library_page .input_border .input_box_btnBox,
|
.library_page .input_border .input_box_btnBox,
|
||||||
.productImg_content .input_border .input_box_btnBox,
|
.productImg_content .input_border .input_box_btnBox,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox,
|
.scaleImage_modal .input_border .input_box_btnBox,
|
||||||
.accountEdit_page .input_border .input_box_btnBox,
|
.accountEdit_page .input_border .input_box_btnBox,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox,
|
||||||
@@ -1838,21 +1843,43 @@ textarea:focus {
|
|||||||
padding: 1.5rem 2rem;
|
padding: 1.5rem 2rem;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox.sketch,
|
.collection_modal_body .input_border .input_box_btnBox.sketch,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
|
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
|
||||||
.library_page .input_border .input_box_btnBox.sketch,
|
.library_page .input_border .input_box_btnBox.sketch,
|
||||||
.productImg_content .input_border .input_box_btnBox.sketch,
|
.productImg_content .input_border .input_box_btnBox.sketch,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox.sketch,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox.sketch,
|
.scaleImage_modal .input_border .input_box_btnBox.sketch,
|
||||||
.accountEdit_page .input_border .input_box_btnBox.sketch,
|
.accountEdit_page .input_border .input_box_btnBox.sketch,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
|
||||||
.generate .input_border .input_box_btnBox.sketch {
|
.generate .input_border .input_box_btnBox.sketch {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
.collection_modal_body .input_border .input_box_btnBox > .textarea,
|
||||||
|
.design_detail_modal_component .input_border .input_box_btnBox > .textarea,
|
||||||
|
.library_page .input_border .input_box_btnBox > .textarea,
|
||||||
|
.productImg_content .input_border .input_box_btnBox > .textarea,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox > .textarea,
|
||||||
|
.scaleImage_modal .input_border .input_box_btnBox > .textarea,
|
||||||
|
.accountEdit_page .input_border .input_box_btnBox > .textarea,
|
||||||
|
.generalMenu_printModel_upload .input_border .input_box_btnBox > .textarea,
|
||||||
|
.generate .input_border .input_box_btnBox > .textarea {
|
||||||
|
border-radius: 1rem;
|
||||||
|
min-height: 2rem;
|
||||||
|
max-height: 20rem;
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
height: 2.7rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 2rem;
|
||||||
|
}
|
||||||
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
|
.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.library_page .input_border .input_box_btnBox .ant-spin-text,
|
.library_page .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.productImg_content .input_border .input_box_btnBox .ant-spin-text,
|
.productImg_content .input_border .input_box_btnBox .ant-spin-text,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox .ant-spin-text,
|
.scaleImage_modal .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
|
.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text,
|
||||||
@@ -1863,6 +1890,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
|
.design_detail_modal_component .input_border .input_box_btnBox .search_seed,
|
||||||
.library_page .input_border .input_box_btnBox .search_seed,
|
.library_page .input_border .input_box_btnBox .search_seed,
|
||||||
.productImg_content .input_border .input_box_btnBox .search_seed,
|
.productImg_content .input_border .input_box_btnBox .search_seed,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox .search_seed,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox .search_seed,
|
.scaleImage_modal .input_border .input_box_btnBox .search_seed,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .search_seed,
|
.accountEdit_page .input_border .input_box_btnBox .search_seed,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .search_seed,
|
||||||
@@ -1877,6 +1905,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
|
.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
|
||||||
.library_page .input_border .input_box_btnBox .upload_item,
|
.library_page .input_border .input_box_btnBox .upload_item,
|
||||||
.productImg_content .input_border .input_box_btnBox .upload_item,
|
.productImg_content .input_border .input_box_btnBox .upload_item,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox .upload_item,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox .upload_item,
|
.scaleImage_modal .input_border .input_box_btnBox .upload_item,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .upload_item,
|
.accountEdit_page .input_border .input_box_btnBox .upload_item,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item,
|
||||||
@@ -1887,6 +1916,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.productImg_content .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.productImg_content .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.scaleImage_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
@@ -1897,13 +1927,14 @@ textarea:focus {
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
height: 5.7rem;
|
height: 5.7rem;
|
||||||
width: 5.7rem;
|
width: 5.7rem;
|
||||||
border-radius: 50%;
|
border-radius: 1rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border input,
|
.collection_modal_body .input_border input,
|
||||||
.design_detail_modal_component .input_border input,
|
.design_detail_modal_component .input_border input,
|
||||||
.library_page .input_border input,
|
.library_page .input_border input,
|
||||||
.productImg_content .input_border input,
|
.productImg_content .input_border input,
|
||||||
|
.poseTransfer .input_border input,
|
||||||
.scaleImage_modal .input_border input,
|
.scaleImage_modal .input_border input,
|
||||||
.accountEdit_page .input_border input,
|
.accountEdit_page .input_border input,
|
||||||
.generalMenu_printModel_upload .input_border input,
|
.generalMenu_printModel_upload .input_border input,
|
||||||
@@ -1921,6 +1952,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
||||||
.library_page .input_border inputinput:-moz-placeholder,
|
.library_page .input_border inputinput:-moz-placeholder,
|
||||||
.productImg_content .input_border inputinput:-moz-placeholder,
|
.productImg_content .input_border inputinput:-moz-placeholder,
|
||||||
|
.poseTransfer .input_border inputinput:-moz-placeholder,
|
||||||
.scaleImage_modal .input_border inputinput:-moz-placeholder,
|
.scaleImage_modal .input_border inputinput:-moz-placeholder,
|
||||||
.accountEdit_page .input_border inputinput:-moz-placeholder,
|
.accountEdit_page .input_border inputinput:-moz-placeholder,
|
||||||
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
|
.generalMenu_printModel_upload .input_border inputinput:-moz-placeholder,
|
||||||
@@ -1931,6 +1963,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
|
.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
|
||||||
.library_page .input_border inputinput:-ms-input-placeholder,
|
.library_page .input_border inputinput:-ms-input-placeholder,
|
||||||
.productImg_content .input_border inputinput:-ms-input-placeholder,
|
.productImg_content .input_border inputinput:-ms-input-placeholder,
|
||||||
|
.poseTransfer .input_border inputinput:-ms-input-placeholder,
|
||||||
.scaleImage_modal .input_border inputinput:-ms-input-placeholder,
|
.scaleImage_modal .input_border inputinput:-ms-input-placeholder,
|
||||||
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
|
.accountEdit_page .input_border inputinput:-ms-input-placeholder,
|
||||||
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
|
.generalMenu_printModel_upload .input_border inputinput:-ms-input-placeholder,
|
||||||
@@ -1941,6 +1974,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
|
.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
|
||||||
.library_page .input_border inputinput::-webkit-input-placeholder,
|
.library_page .input_border inputinput::-webkit-input-placeholder,
|
||||||
.productImg_content .input_border inputinput::-webkit-input-placeholder,
|
.productImg_content .input_border inputinput::-webkit-input-placeholder,
|
||||||
|
.poseTransfer .input_border inputinput::-webkit-input-placeholder,
|
||||||
.scaleImage_modal .input_border inputinput::-webkit-input-placeholder,
|
.scaleImage_modal .input_border inputinput::-webkit-input-placeholder,
|
||||||
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
|
.accountEdit_page .input_border inputinput::-webkit-input-placeholder,
|
||||||
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
|
.generalMenu_printModel_upload .input_border inputinput::-webkit-input-placeholder,
|
||||||
@@ -1951,6 +1985,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border input.forbidden,
|
.design_detail_modal_component .input_border input.forbidden,
|
||||||
.library_page .input_border input.forbidden,
|
.library_page .input_border input.forbidden,
|
||||||
.productImg_content .input_border input.forbidden,
|
.productImg_content .input_border input.forbidden,
|
||||||
|
.poseTransfer .input_border input.forbidden,
|
||||||
.scaleImage_modal .input_border input.forbidden,
|
.scaleImage_modal .input_border input.forbidden,
|
||||||
.accountEdit_page .input_border input.forbidden,
|
.accountEdit_page .input_border input.forbidden,
|
||||||
.generalMenu_printModel_upload .input_border input.forbidden,
|
.generalMenu_printModel_upload .input_border input.forbidden,
|
||||||
@@ -1961,6 +1996,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
|
.design_detail_modal_component .input_border .input_box_btnBox_upImg,
|
||||||
.library_page .input_border .input_box_btnBox_upImg,
|
.library_page .input_border .input_box_btnBox_upImg,
|
||||||
.productImg_content .input_border .input_box_btnBox_upImg,
|
.productImg_content .input_border .input_box_btnBox_upImg,
|
||||||
|
.poseTransfer .input_border .input_box_btnBox_upImg,
|
||||||
.scaleImage_modal .input_border .input_box_btnBox_upImg,
|
.scaleImage_modal .input_border .input_box_btnBox_upImg,
|
||||||
.accountEdit_page .input_border .input_box_btnBox_upImg,
|
.accountEdit_page .input_border .input_box_btnBox_upImg,
|
||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox_upImg,
|
||||||
@@ -1971,6 +2007,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi,
|
.design_detail_modal_component .input_border .fi,
|
||||||
.library_page .input_border .fi,
|
.library_page .input_border .fi,
|
||||||
.productImg_content .input_border .fi,
|
.productImg_content .input_border .fi,
|
||||||
|
.poseTransfer .input_border .fi,
|
||||||
.scaleImage_modal .input_border .fi,
|
.scaleImage_modal .input_border .fi,
|
||||||
.accountEdit_page .input_border .fi,
|
.accountEdit_page .input_border .fi,
|
||||||
.generalMenu_printModel_upload .input_border .fi,
|
.generalMenu_printModel_upload .input_border .fi,
|
||||||
@@ -1990,6 +2027,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
.design_detail_modal_component .input_border .fi.fi-br-loading,
|
||||||
.library_page .input_border .fi.fi-br-loading,
|
.library_page .input_border .fi.fi-br-loading,
|
||||||
.productImg_content .input_border .fi.fi-br-loading,
|
.productImg_content .input_border .fi.fi-br-loading,
|
||||||
|
.poseTransfer .input_border .fi.fi-br-loading,
|
||||||
.scaleImage_modal .input_border .fi.fi-br-loading,
|
.scaleImage_modal .input_border .fi.fi-br-loading,
|
||||||
.accountEdit_page .input_border .fi.fi-br-loading,
|
.accountEdit_page .input_border .fi.fi-br-loading,
|
||||||
.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
|
.generalMenu_printModel_upload .input_border .fi.fi-br-loading,
|
||||||
@@ -2001,6 +2039,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi.active,
|
.design_detail_modal_component .input_border .fi.active,
|
||||||
.library_page .input_border .fi.active,
|
.library_page .input_border .fi.active,
|
||||||
.productImg_content .input_border .fi.active,
|
.productImg_content .input_border .fi.active,
|
||||||
|
.poseTransfer .input_border .fi.active,
|
||||||
.scaleImage_modal .input_border .fi.active,
|
.scaleImage_modal .input_border .fi.active,
|
||||||
.accountEdit_page .input_border .fi.active,
|
.accountEdit_page .input_border .fi.active,
|
||||||
.generalMenu_printModel_upload .input_border .fi.active,
|
.generalMenu_printModel_upload .input_border .fi.active,
|
||||||
@@ -2011,6 +2050,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .fi.forbidden,
|
.design_detail_modal_component .input_border .fi.forbidden,
|
||||||
.library_page .input_border .fi.forbidden,
|
.library_page .input_border .fi.forbidden,
|
||||||
.productImg_content .input_border .fi.forbidden,
|
.productImg_content .input_border .fi.forbidden,
|
||||||
|
.poseTransfer .input_border .fi.forbidden,
|
||||||
.scaleImage_modal .input_border .fi.forbidden,
|
.scaleImage_modal .input_border .fi.forbidden,
|
||||||
.accountEdit_page .input_border .fi.forbidden,
|
.accountEdit_page .input_border .fi.forbidden,
|
||||||
.generalMenu_printModel_upload .input_border .fi.forbidden,
|
.generalMenu_printModel_upload .input_border .fi.forbidden,
|
||||||
@@ -2021,6 +2061,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_upImg,
|
.design_detail_modal_component .input_border .search_upImg,
|
||||||
.library_page .input_border .search_upImg,
|
.library_page .input_border .search_upImg,
|
||||||
.productImg_content .input_border .search_upImg,
|
.productImg_content .input_border .search_upImg,
|
||||||
|
.poseTransfer .input_border .search_upImg,
|
||||||
.scaleImage_modal .input_border .search_upImg,
|
.scaleImage_modal .input_border .search_upImg,
|
||||||
.accountEdit_page .input_border .search_upImg,
|
.accountEdit_page .input_border .search_upImg,
|
||||||
.generalMenu_printModel_upload .input_border .search_upImg,
|
.generalMenu_printModel_upload .input_border .search_upImg,
|
||||||
@@ -2035,6 +2076,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_upImg span,
|
.design_detail_modal_component .input_border .search_upImg span,
|
||||||
.library_page .input_border .search_upImg span,
|
.library_page .input_border .search_upImg span,
|
||||||
.productImg_content .input_border .search_upImg span,
|
.productImg_content .input_border .search_upImg span,
|
||||||
|
.poseTransfer .input_border .search_upImg span,
|
||||||
.scaleImage_modal .input_border .search_upImg span,
|
.scaleImage_modal .input_border .search_upImg span,
|
||||||
.accountEdit_page .input_border .search_upImg span,
|
.accountEdit_page .input_border .search_upImg span,
|
||||||
.generalMenu_printModel_upload .input_border .search_upImg span,
|
.generalMenu_printModel_upload .input_border .search_upImg span,
|
||||||
@@ -2046,6 +2088,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
|
.design_detail_modal_component .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
|
.library_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.productImg_content .input_border .search_upImg .ant-upload-select-picture-card,
|
.productImg_content .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
|
.poseTransfer .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.scaleImage_modal .input_border .search_upImg .ant-upload-select-picture-card,
|
.scaleImage_modal .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
|
.accountEdit_page .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
|
.generalMenu_printModel_upload .input_border .search_upImg .ant-upload-select-picture-card,
|
||||||
@@ -2058,6 +2101,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .search_textarea,
|
.design_detail_modal_component .input_border .search_textarea,
|
||||||
.library_page .input_border .search_textarea,
|
.library_page .input_border .search_textarea,
|
||||||
.productImg_content .input_border .search_textarea,
|
.productImg_content .input_border .search_textarea,
|
||||||
|
.poseTransfer .input_border .search_textarea,
|
||||||
.scaleImage_modal .input_border .search_textarea,
|
.scaleImage_modal .input_border .search_textarea,
|
||||||
.accountEdit_page .input_border .search_textarea,
|
.accountEdit_page .input_border .search_textarea,
|
||||||
.generalMenu_printModel_upload .input_border .search_textarea,
|
.generalMenu_printModel_upload .input_border .search_textarea,
|
||||||
@@ -2077,6 +2121,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .generage_btn_box,
|
.design_detail_modal_component .input_border .generage_btn_box,
|
||||||
.library_page .input_border .generage_btn_box,
|
.library_page .input_border .generage_btn_box,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box,
|
||||||
.accountEdit_page .input_border .generage_btn_box,
|
.accountEdit_page .input_border .generage_btn_box,
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box,
|
.generalMenu_printModel_upload .input_border .generage_btn_box,
|
||||||
@@ -2085,10 +2130,22 @@ textarea:focus {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.collection_modal_body .input_border .generage_btn_box .generage_btn,
|
||||||
|
.design_detail_modal_component .input_border .generage_btn_box .generage_btn,
|
||||||
|
.library_page .input_border .generage_btn_box .generage_btn,
|
||||||
|
.productImg_content .input_border .generage_btn_box .generage_btn,
|
||||||
|
.poseTransfer .input_border .generage_btn_box .generage_btn,
|
||||||
|
.scaleImage_modal .input_border .generage_btn_box .generage_btn,
|
||||||
|
.accountEdit_page .input_border .generage_btn_box .generage_btn,
|
||||||
|
.generalMenu_printModel_upload .input_border .generage_btn_box .generage_btn,
|
||||||
|
.generate .input_border .generage_btn_box .generage_btn {
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .icon-xiala,
|
.collection_modal_body .input_border .generage_btn_box .icon-xiala,
|
||||||
.design_detail_modal_component .input_border .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,
|
.library_page .input_border .generage_btn_box .icon-xiala,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box .icon-xiala,
|
||||||
.accountEdit_page .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,
|
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
|
||||||
@@ -2101,6 +2158,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .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,
|
.library_page .input_border .generage_btn_box .icon-xiala.active,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box .icon-xiala.active,
|
||||||
.accountEdit_page .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,
|
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
|
||||||
@@ -2111,6 +2169,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .generage_btn_box .content,
|
.design_detail_modal_component .input_border .generage_btn_box .content,
|
||||||
.library_page .input_border .generage_btn_box .content,
|
.library_page .input_border .generage_btn_box .content,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box .content,
|
||||||
.accountEdit_page .input_border .generage_btn_box .content,
|
.accountEdit_page .input_border .generage_btn_box .content,
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
|
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
|
||||||
@@ -2118,17 +2177,19 @@ textarea:focus {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
left: 2rem;
|
left: 0rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content > div,
|
.collection_modal_body .input_border .generage_btn_box .content > div,
|
||||||
.design_detail_modal_component .input_border .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,
|
.library_page .input_border .generage_btn_box .content > div,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box .content > div,
|
||||||
.accountEdit_page .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,
|
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
|
||||||
@@ -2141,10 +2202,22 @@ textarea:focus {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
.collection_modal_body .input_border .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;
|
||||||
|
}
|
||||||
.collection_modal_body .input_border .generage_btn_box .content > div:hover,
|
.collection_modal_body .input_border .generage_btn_box .content > div:hover,
|
||||||
.design_detail_modal_component .input_border .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,
|
.library_page .input_border .generage_btn_box .content > div:hover,
|
||||||
.productImg_content .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,
|
.scaleImage_modal .input_border .generage_btn_box .content > div:hover,
|
||||||
.accountEdit_page .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,
|
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
|
||||||
@@ -2155,6 +2228,7 @@ textarea:focus {
|
|||||||
.design_detail_modal_component .input_border .generage_btn,
|
.design_detail_modal_component .input_border .generage_btn,
|
||||||
.library_page .input_border .generage_btn,
|
.library_page .input_border .generage_btn,
|
||||||
.productImg_content .input_border .generage_btn,
|
.productImg_content .input_border .generage_btn,
|
||||||
|
.poseTransfer .input_border .generage_btn,
|
||||||
.scaleImage_modal .input_border .generage_btn,
|
.scaleImage_modal .input_border .generage_btn,
|
||||||
.accountEdit_page .input_border .generage_btn,
|
.accountEdit_page .input_border .generage_btn,
|
||||||
.generalMenu_printModel_upload .input_border .generage_btn,
|
.generalMenu_printModel_upload .input_border .generage_btn,
|
||||||
@@ -2164,6 +2238,7 @@ textarea:focus {
|
|||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.hideChecked {
|
.hideChecked {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@@ -793,14 +793,16 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
|
|
||||||
}
|
}
|
||||||
>input{
|
>input{
|
||||||
height: 2.5rem !important;
|
height: 6rem !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1rem !important;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
// border-radius: 4rem;
|
// border-radius: 4rem;
|
||||||
padding: calc(2rem - 1px * 2) !important;
|
// box-sizing: content-box;
|
||||||
box-sizing: content-box;
|
box-sizing: border-box;
|
||||||
background-color: #f3f3f3;
|
background-color: #f3f3f3;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: calc(100% - 4rem);
|
width: 25rem;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
@@ -827,9 +829,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
width: calc(100% - 4rem);
|
width: calc(100% - 4rem);
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.ant-select-selector{
|
|
||||||
border-radius: 4rem;
|
|
||||||
}
|
|
||||||
.ant-picker-input > input{
|
.ant-picker-input > input{
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
@@ -977,6 +976,11 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
> .ant-modal-body{
|
> .ant-modal-body{
|
||||||
padding: 2.5rem 3rem;
|
padding: 2.5rem 3rem;
|
||||||
}
|
}
|
||||||
|
.generalModel_btn {
|
||||||
|
.generalModel_closeIcon{
|
||||||
|
transform: translate(-100%, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ant-modal-content{
|
.ant-modal-content{
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
@@ -1280,18 +1284,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
|||||||
top: 6rem;
|
top: 6rem;
|
||||||
}
|
}
|
||||||
.ant-modal-confirm-btns{
|
.ant-modal-confirm-btns{
|
||||||
.ant-btn:hover{
|
|
||||||
color: #fff !important;
|
|
||||||
border-color: #39215b !important;
|
|
||||||
}
|
|
||||||
.ant-btn-primary{
|
.ant-btn-primary{
|
||||||
background: #39215b !important;
|
background: #000 !important;
|
||||||
border-color: #39215b !important;
|
border-color: #000 !important;
|
||||||
}
|
|
||||||
.ant-btn-primary:hover{
|
|
||||||
color: #fff !important;
|
|
||||||
border-color: #543087 !important;
|
|
||||||
background: #543087 !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//loding样式
|
//loding样式
|
||||||
@@ -1759,6 +1754,7 @@ textarea:focus{
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
.fi-br-upload{
|
.fi-br-upload{
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1827,7 +1823,7 @@ textarea:focus{
|
|||||||
|
|
||||||
}
|
}
|
||||||
//设计input和上传按钮样式
|
//设计input和上传按钮样式
|
||||||
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
|
.collection_modal_body,.design_detail_modal_component,.library_page,.productImg_content,.poseTransfer,.scaleImage_modal,.accountEdit_page,.generalMenu_printModel_upload,.generate{
|
||||||
.input_border{
|
.input_border{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1843,17 +1839,18 @@ textarea:focus{
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
.inputShowText{
|
.inputShowText{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
&.active{
|
&.active{
|
||||||
.input_box_btnBox,textarea{
|
.input_box_btnBox,.search_textarea{
|
||||||
// color: rgb(255, 0, .7);
|
// color: rgb(255, 0, .7);
|
||||||
border: 1px solid rgb(255, 0, .7);
|
border: 1px solid rgb(255, 0, .7);
|
||||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
span{
|
.inputShowText{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255, 0, .7);
|
color: rgba(255, 0, .7);
|
||||||
@@ -1912,10 +1909,23 @@ textarea:focus{
|
|||||||
padding: 1.5rem 2rem;
|
padding: 1.5rem 2rem;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
flex: 1;
|
||||||
// border
|
// border
|
||||||
&.sketch{
|
&.sketch{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
> .textarea{
|
||||||
|
border-radius: 1rem;
|
||||||
|
min-height: 2rem;
|
||||||
|
max-height: 20rem;
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
height: 2.7rem;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 2rem;
|
||||||
|
// overflow: hidden;
|
||||||
|
}
|
||||||
.ant-spin-text{
|
.ant-spin-text{
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
@@ -1935,7 +1945,7 @@ textarea:focus{
|
|||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
height: 5.7rem;
|
height: 5.7rem;
|
||||||
width: 5.7rem;
|
width: 5.7rem;
|
||||||
border-radius: 50%;
|
border-radius: 1rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2034,7 +2044,9 @@ textarea:focus{
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
.generage_btn{
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
.icon-xiala{
|
.icon-xiala{
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
@@ -2047,12 +2059,13 @@ textarea:focus{
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
width: calc(100% - 2rem);
|
width: calc(100% - 2rem);
|
||||||
left: 2rem;
|
left: 0rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: calc(1rem* 1.2);
|
border-radius: calc(1rem* 1.2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
margin-top: .2rem;
|
margin-top: .2rem;
|
||||||
|
margin-left: 2rem;
|
||||||
>div{
|
>div{
|
||||||
background: #cccccc;
|
background: #cccccc;
|
||||||
line-height: 2;
|
line-height: 2;
|
||||||
@@ -2061,6 +2074,9 @@ textarea:focus{
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
&.active{
|
||||||
|
background-color: #616161;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
>div:hover{
|
>div:hover{
|
||||||
background: #999999;
|
background: #999999;
|
||||||
@@ -2074,6 +2090,7 @@ textarea:focus{
|
|||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,11 +2,11 @@
|
|||||||
<div class="canvasArgument">
|
<div class="canvasArgument">
|
||||||
<div class="label_item wH">
|
<div class="label_item wH">
|
||||||
<div class="title">{{ $t('exportModel.Width') }}</div>
|
<div class="title">{{ $t('exportModel.Width') }}</div>
|
||||||
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
|
<input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.layerWidth">
|
||||||
</div>
|
</div>
|
||||||
<div class="label_item wH">
|
<div class="label_item wH">
|
||||||
<div class="title">{{ $t('exportModel.Height') }}</div>
|
<div class="title">{{ $t('exportModel.Height') }}</div>
|
||||||
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
|
<input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.layerHeight">
|
||||||
</div>
|
</div>
|
||||||
<div class="label_item" v-show="
|
<div class="label_item" v-show="
|
||||||
canvasGeneral.operation != 'movePosition' &&
|
canvasGeneral.operation != 'movePosition' &&
|
||||||
@@ -93,7 +93,6 @@
|
|||||||
:style="{'font-family':canvasGeneral.fontFamily}"
|
:style="{'font-family':canvasGeneral.fontFamily}"
|
||||||
>
|
>
|
||||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
|
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
|
||||||
{{item.name}}
|
|
||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,6 +147,7 @@
|
|||||||
}
|
}
|
||||||
const addImage = (item:any)=>{
|
const addImage = (item:any)=>{
|
||||||
if(!item.minioUrl)item.minioUrl = item.imgUrl
|
if(!item.minioUrl)item.minioUrl = item.imgUrl
|
||||||
|
item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
|
||||||
canvasGeneral.addImage(item)
|
canvasGeneral.addImage(item)
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="canvasContent_box">
|
<div class="canvasContent_box">
|
||||||
<div class="canvasContent" ref="canvasScaleDom">
|
<div class="canvasContent" ref="canvasScaleDom">
|
||||||
<div v-if="isPresuppose" class="generalCanvas_center presuppose">
|
<!-- <div v-if="isPresuppose" class="generalCanvas_center presuppose">
|
||||||
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
|
<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
|
||||||
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
|
<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
|
||||||
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
|
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
|
<div class="generalCanvas_center canvas" ref="canvasDom">
|
||||||
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
|
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -29,7 +29,6 @@
|
|||||||
const data:any = reactive({
|
const data:any = reactive({
|
||||||
canvasScaleDom:null,
|
canvasScaleDom:null,
|
||||||
canvasDom:null,
|
canvasDom:null,
|
||||||
isPresuppose:false,
|
|
||||||
isShowMark:false,
|
isShowMark:false,
|
||||||
pencilbtnStyle:{},
|
pencilbtnStyle:{},
|
||||||
|
|
||||||
@@ -41,7 +40,7 @@
|
|||||||
await canvasGeneral.canvasInit(data.canvasDom,{
|
await canvasGeneral.canvasInit(data.canvasDom,{
|
||||||
width:data.canvasDom.offsetWidth,
|
width:data.canvasDom.offsetWidth,
|
||||||
height:data.canvasDom.offsetHeight,
|
height:data.canvasDom.offsetHeight,
|
||||||
})
|
},'','','',2000)
|
||||||
resolve('')
|
resolve('')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -105,17 +104,16 @@
|
|||||||
const openSetData =async ()=>{
|
const openSetData =async ()=>{
|
||||||
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
|
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
|
||||||
if(oldCanvas){
|
if(oldCanvas){
|
||||||
await createCanvas({})
|
await canvasGeneral.createCanvas(data.canvasDom,{
|
||||||
|
width:data.canvasDom.offsetWidth,
|
||||||
|
height:data.canvasDom.offsetHeight,
|
||||||
|
},2000)
|
||||||
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
||||||
|
}else{
|
||||||
|
await createCanvas({})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
if(canvasType == 'export'){
|
|
||||||
data.isPresuppose = true
|
|
||||||
}else{
|
|
||||||
createCanvas({})
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
canvasGeneral,
|
canvasGeneral,
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
>
|
>
|
||||||
<div class="layer">
|
<div class="layer">
|
||||||
<div class="layer-item button" @click="canvasGeneral.createLayer">
|
<div class="layer-item button" @click="canvasGeneral.createLayer">
|
||||||
新建图层
|
Add Layer
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-item-box-scroll">
|
<div class="layer-item-box-scroll">
|
||||||
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
|
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
|
||||||
@@ -13,11 +13,11 @@
|
|||||||
v-for="item,index in layerList"
|
v-for="item,index in layerList"
|
||||||
:key="item"
|
:key="item"
|
||||||
:style="item?.style"
|
:style="item?.style"
|
||||||
@click="canvasGeneral.selectLayer(item.id)"
|
@click.stop="canvasGeneral.selectLayer(item.id)"
|
||||||
@mousedown="mousedown($event,item,index)"
|
@mousedown.stop="mousedown($event,item,index)"
|
||||||
@touchstart="touchstart($event,item,index)"
|
@touchstart.stop="touchstart($event,item,index)"
|
||||||
|
|
||||||
@contextmenu="openMenu($event,item,index)"
|
@contextmenu.stop="openMenu($event,item,index)"
|
||||||
|
|
||||||
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
|
:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
|
||||||
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
|
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
|
||||||
@@ -26,17 +26,19 @@
|
|||||||
<div>
|
<div>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</div>
|
</div>
|
||||||
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
|
<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">
|
||||||
|
<i class="fi fi-rr-trash icon_delete"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="layer-menu" :style="styleMenu">
|
<div class="layer-menu" :style="styleMenu">
|
||||||
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
|
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">Copy</div>
|
||||||
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
|
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">Delete</div>
|
||||||
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
|
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">Rasterize layer</div>
|
||||||
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
|
<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">Cancal rasterization</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -90,7 +92,7 @@
|
|||||||
const openMenu = (event:any,item:any,index:number)=>{
|
const openMenu = (event:any,item:any,index:number)=>{
|
||||||
if(event.preventDefault)event.preventDefault();
|
if(event.preventDefault)event.preventDefault();
|
||||||
data.itemMenu = item;
|
data.itemMenu = item;
|
||||||
data.itemMenu.index = index
|
// data.itemMenu.index = index
|
||||||
let position = data.detailDom.getBoundingClientRect();
|
let position = data.detailDom.getBoundingClientRect();
|
||||||
data.styleMenu = {
|
data.styleMenu = {
|
||||||
left:event.clientX - position.left+'px',
|
left:event.clientX - position.left+'px',
|
||||||
@@ -191,7 +193,6 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
|
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
|
||||||
|
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
canvasGeneral,
|
canvasGeneral,
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
|
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||||
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
|
<publish ref="publish" @clearPublish="()=>{}"></publish>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -118,7 +118,6 @@ export default defineComponent({
|
|||||||
const getCanvasData = ()=>{
|
const getCanvasData = ()=>{
|
||||||
if(!canvasObj.canvas)return
|
if(!canvasObj.canvas)return
|
||||||
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
|
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
|
||||||
// console.log(JSON.stringify(json));
|
|
||||||
json.objects.forEach(item=>{
|
json.objects.forEach(item=>{
|
||||||
if(item.type == 'image'){
|
if(item.type == 'image'){
|
||||||
delete item.src
|
delete item.src
|
||||||
@@ -131,6 +130,7 @@ export default defineComponent({
|
|||||||
return canvasExport
|
return canvasExport
|
||||||
}
|
}
|
||||||
const openSetData = async ()=>{
|
const openSetData = async ()=>{
|
||||||
|
//获取所有所选元素
|
||||||
let arr = store.state.Workspace.projectList
|
let arr = store.state.Workspace.projectList
|
||||||
let obj = {}
|
let obj = {}
|
||||||
for (let index = 0; index < arr.length; index++) {
|
for (let index = 0; index < arr.length; index++) {
|
||||||
@@ -142,6 +142,13 @@ export default defineComponent({
|
|||||||
resolve('')
|
resolve('')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if(keys == 'design'){
|
||||||
|
value[keys].forEach((designItem)=>{
|
||||||
|
let minioUrl = designItem.url
|
||||||
|
designItem.url = designItem.designOutfitUrl
|
||||||
|
designItem.minioUrl = designItem.minioUrl
|
||||||
|
})
|
||||||
|
}
|
||||||
let rv = {
|
let rv = {
|
||||||
list:value[keys],
|
list:value[keys],
|
||||||
name:item.name,
|
name:item.name,
|
||||||
@@ -150,9 +157,10 @@ export default defineComponent({
|
|||||||
resolve('')
|
resolve('')
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
data.elementList = obj
|
data.elementList = obj
|
||||||
|
//获取所有所选元素 END
|
||||||
|
|
||||||
if(data.showCanvas)return
|
if(data.showCanvas)return
|
||||||
data.showCanvas = true
|
data.showCanvas = true
|
||||||
dataDom.canvasContent.openSetData()
|
dataDom.canvasContent.openSetData()
|
||||||
@@ -179,7 +187,6 @@ export default defineComponent({
|
|||||||
name: "collection.png",
|
name: "collection.png",
|
||||||
});
|
});
|
||||||
let num = 0;
|
let num = 0;
|
||||||
console.log(data.elementList)
|
|
||||||
for (let key in data.elementList) {
|
for (let key in data.elementList) {
|
||||||
for (let index = 0; index < data.elementList[key].list.length; index++) {
|
for (let index = 0; index < data.elementList[key].list.length; index++) {
|
||||||
const item = data.elementList[key].list[index];
|
const item = data.elementList[key].list[index];
|
||||||
@@ -188,7 +195,6 @@ export default defineComponent({
|
|||||||
img.push({imgUrl:url,name:`element${index}.${name}`})
|
img.push({imgUrl:url,name:`element${index}.${name}`})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(img)
|
|
||||||
downImg(img);
|
downImg(img);
|
||||||
};
|
};
|
||||||
let getImgArrayBuffer = (url) => {
|
let getImgArrayBuffer = (url) => {
|
||||||
@@ -252,7 +258,7 @@ export default defineComponent({
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
});
|
});
|
||||||
onBeforeUnmount(()=>{
|
onBeforeUnmount(()=>{
|
||||||
// canvasGeneral.canvasClear()
|
canvasObj.canvasClear()
|
||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
isShowMark,
|
isShowMark,
|
||||||
|
|||||||
@@ -117,6 +117,7 @@ import { Https } from "@/tool/https";
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
overflow-y: auto;
|
||||||
&.leftAlign{
|
&.leftAlign{
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,34 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
|
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
|
||||||
<a-modal
|
<a-modal
|
||||||
class="addDetails_modal generalModel"
|
class="addDetails_modal generalModel fullScreen"
|
||||||
v-model:visible="addDetails"
|
v-model:visible="addDetails"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
:get-container="() => $refs.addDetailsModal"
|
:get-container="() => $refs.addDetailsModal"
|
||||||
width="78%"
|
width="100%"
|
||||||
|
height="100%"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
:destroyOnClose="true"
|
:destroyOnClose="true"
|
||||||
wrapClassName="#app"
|
wrapClassName="#app"
|
||||||
:keyboard="false"
|
:keyboard="false"
|
||||||
|
:mask="false"
|
||||||
>
|
>
|
||||||
<div class="generalModel_btn">
|
<div class="generalModel_btn">
|
||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="addDetails_center">
|
<div class="addDetails_center">
|
||||||
<div class="modal_title_text">
|
|
||||||
<div>{{ $t('addDetails.AddDetails') }}</div>
|
|
||||||
<div class="modal_title_text_intro"></div>
|
|
||||||
</div>
|
|
||||||
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div></div>
|
||||||
|
|||||||
@@ -90,6 +90,7 @@ export default defineComponent({
|
|||||||
ratio = [1,1]
|
ratio = [1,1]
|
||||||
imgData.value = data
|
imgData.value = data
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
|
let contentBox = document.querySelector(".editFrontBack_center");
|
||||||
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
||||||
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
|
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
|
||||||
document.removeEventListener('mousemove', mouseMove);
|
document.removeEventListener('mousemove', mouseMove);
|
||||||
@@ -97,33 +98,36 @@ export default defineComponent({
|
|||||||
let img = new Image();
|
let img = new Image();
|
||||||
img.onload = async function(){
|
img.onload = async function(){
|
||||||
loadingShow.value = true
|
loadingShow.value = true
|
||||||
let scale = img.width/img.height
|
let scale
|
||||||
let height = canvasBox.offsetHeight;
|
|
||||||
canvasWH.value = height
|
|
||||||
canvasBox.style.width = height * scale+'px'
|
|
||||||
|
|
||||||
let wScale = 1
|
let wScale = 1
|
||||||
let hScale = 1
|
let hScale = 1
|
||||||
let styleWidth = Number(data.style.width.split('px')[0])
|
let styleWidth = Number(data.style.width.split('px')[0])
|
||||||
let styleHeight = Number(data.style.height.split('px')[0])
|
let styleHeight = Number(data.style.height.split('px')[0])
|
||||||
|
let width = contentBox.offsetWidth;
|
||||||
|
let height = contentBox.offsetHeight;
|
||||||
if(styleWidth>styleHeight){
|
if(styleWidth>styleHeight){
|
||||||
hScale = styleHeight/styleWidth
|
hScale = styleHeight/styleWidth
|
||||||
exportWH = img.width
|
exportWH = img.width
|
||||||
|
canvasWH.value = width
|
||||||
|
scale = img.height/img.width
|
||||||
|
console.log(width,scale)
|
||||||
|
canvasBox.style.height = width * scale+'px'
|
||||||
}else{
|
}else{
|
||||||
wScale = styleWidth/styleHeight
|
wScale = styleWidth/styleHeight
|
||||||
exportWH = img.height
|
exportWH = img.height
|
||||||
|
canvasWH.value = height
|
||||||
|
scale = img.width/img.height
|
||||||
|
canvasBox.style.width = height * scale+'px'
|
||||||
}
|
}
|
||||||
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
|
editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
|
||||||
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
|
editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
|
||||||
ratio = [wScale,hScale]
|
ratio = [wScale,hScale]
|
||||||
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
|
|
||||||
// width:canvasWH.value * wScale,
|
|
||||||
// height:canvasWH.value * hScale,
|
|
||||||
// })
|
|
||||||
await frontBackCanvasObj.canvasInit(canvasBox,{
|
await frontBackCanvasObj.canvasInit(canvasBox,{
|
||||||
width:canvasWH.value * wScale,
|
width:canvasWH.value * wScale,
|
||||||
height:canvasWH.value * hScale,
|
height:canvasWH.value * hScale,
|
||||||
},data.maskUrl,'',{})
|
},data.maskUrl,'',{noWheel:true})
|
||||||
// undividedLayer
|
// undividedLayer
|
||||||
canvas = frontBackCanvasObj.canvas
|
canvas = frontBackCanvasObj.canvas
|
||||||
|
|
||||||
@@ -383,6 +387,8 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
background: #e6e6e6;
|
background: #e6e6e6;
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
&:hover{
|
&:hover{
|
||||||
cursor: none;
|
cursor: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -272,10 +272,10 @@ methods: {
|
|||||||
left: 50%;
|
left: 50%;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
|
background: radial-gradient(50px circle at var(--x) var(--y),#000 0,transparent 100%);;
|
||||||
}
|
}
|
||||||
.content_bottom_item .active{
|
.content_bottom_item .active{
|
||||||
background: #39215b;
|
background: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,13 +10,13 @@
|
|||||||
</div> -->
|
</div> -->
|
||||||
<div v-show="isEditFrontBack" class="frontBack">
|
<div v-show="isEditFrontBack" class="frontBack">
|
||||||
<div class="label_item" @click.stop="setOperation('print')">
|
<div class="label_item" @click.stop="setOperation('print')">
|
||||||
<div class="title">Sharding</div>
|
<div class="title">Masking :</div>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="frontBackData"
|
v-model:value="frontBackData"
|
||||||
:options="frontBackDataList"
|
:options="frontBackDataList"
|
||||||
size="large"
|
size="large"
|
||||||
:fieldNames="{ label: 'name', value: 'value' }"
|
:fieldNames="{ label: 'name', value: 'value' }"
|
||||||
style="width:12rem;"
|
style="width:18rem;"
|
||||||
@change="changeFrontBackData"
|
@change="changeFrontBackData"
|
||||||
>
|
>
|
||||||
<template #suffixIcon
|
<template #suffixIcon
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="label_item">
|
<div class="label_item">
|
||||||
<div class="titile">{{ $t('exportModel.Size') }}:</div>
|
<div class="title">{{ $t('exportModel.Size') }} :</div>
|
||||||
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
|
<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
|
||||||
|
|
||||||
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
|
<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
|
||||||
@@ -65,6 +65,17 @@
|
|||||||
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
|
<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
|
||||||
|
<div class="title">{{ $t('exportModel.Texture') }}:</div>
|
||||||
|
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
|
||||||
|
style="width: 12rem "
|
||||||
|
@change="canvasGeneral.textureValueChange"
|
||||||
|
>
|
||||||
|
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
|
||||||
|
<img :src="item.url" alt="">
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
<div class="label_item" v-show="
|
<div class="label_item" v-show="
|
||||||
canvasGeneral.operation != 'movePosition' &&
|
canvasGeneral.operation != 'movePosition' &&
|
||||||
canvasGeneral.operation != 'move' &&
|
canvasGeneral.operation != 'move' &&
|
||||||
@@ -80,7 +91,7 @@
|
|||||||
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
|
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
|
||||||
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
|
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
|
||||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
|
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
|
||||||
style="width: 12rem "
|
style="width: 12rem ;height: 6rem;"
|
||||||
@change="canvasGeneral.brushworkChange"
|
@change="canvasGeneral.brushworkChange"
|
||||||
>
|
>
|
||||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
|
<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
|
||||||
@@ -88,17 +99,7 @@
|
|||||||
</a-select-option>
|
</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
|
|
||||||
<div class="title">{{ $t('exportModel.Texture') }}:</div>
|
|
||||||
<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
|
|
||||||
style="width: 12rem "
|
|
||||||
@change="canvasGeneral.textureValueChange"
|
|
||||||
>
|
|
||||||
<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
|
|
||||||
<img :src="item.url" alt="">
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</div>
|
|
||||||
<div class="label_item" v-show="
|
<div class="label_item" v-show="
|
||||||
canvasGeneral.operation != 'pencil' &&
|
canvasGeneral.operation != 'pencil' &&
|
||||||
canvasGeneral.operation != 'eraser'&&
|
canvasGeneral.operation != 'eraser'&&
|
||||||
@@ -162,13 +163,13 @@
|
|||||||
frontBackData:'#ff0000',
|
frontBackData:'#ff0000',
|
||||||
frontBackDataList:[
|
frontBackDataList:[
|
||||||
{
|
{
|
||||||
name:'正面',
|
name:'Front Piece',
|
||||||
value:'#ff0000'
|
value:'#ff0000'
|
||||||
},{
|
},{
|
||||||
name:'反面',
|
name:'Back Piece',
|
||||||
value:'#00ff00'
|
value:'#00ff00'
|
||||||
},{
|
},{
|
||||||
name:'背景',
|
name:'Surroundings',
|
||||||
value:'background'
|
value:'background'
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@@ -190,9 +191,10 @@
|
|||||||
const closeModal = ()=>{
|
const closeModal = ()=>{
|
||||||
document.removeEventListener('click',setOper)
|
document.removeEventListener('click',setOper)
|
||||||
}
|
}
|
||||||
const selectImgItem = (data:any)=>{
|
const selectImgItem = (value:any)=>{
|
||||||
data.minioUrl = data.url
|
value.minioUrl = value.url
|
||||||
canvasGeneral.addPartImg(data,'print')
|
canvasGeneral.addPartImg(value,'print')
|
||||||
|
data.operation = ''
|
||||||
}
|
}
|
||||||
const changeFrontBackData = (value:any)=>{
|
const changeFrontBackData = (value:any)=>{
|
||||||
emit('setFrontBackColor',value)
|
emit('setFrontBackColor',value)
|
||||||
@@ -227,7 +229,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
> .current{
|
> .current{
|
||||||
border-radius: 3rem;
|
border-radius: 1rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
width: 7rem;
|
width: 7rem;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
@@ -238,7 +240,7 @@
|
|||||||
top: 4rem;
|
top: 4rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
border-radius: 2rem;
|
border-radius: 1rem;
|
||||||
padding: 2.4rem;
|
padding: 2.4rem;
|
||||||
width: 40rem;
|
width: 40rem;
|
||||||
height: 50rem;
|
height: 50rem;
|
||||||
@@ -264,14 +266,7 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
input{
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3rem;
|
|
||||||
width: 12rem;
|
|
||||||
background: #fff;
|
|
||||||
height: 3rem;
|
|
||||||
border: 1px solid #000;
|
|
||||||
}
|
|
||||||
&.wH input{
|
&.wH input{
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
}
|
}
|
||||||
@@ -280,23 +275,7 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
}
|
}
|
||||||
:deep(.ant-select){
|
|
||||||
|
|
||||||
border-radius: 3rem;
|
|
||||||
.ant-select-selector{
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3rem;
|
|
||||||
border: 1px solid;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.ant-select-selection-item{
|
|
||||||
display: flex;
|
|
||||||
font-size: 2rem;
|
|
||||||
line-height: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
&.sketch{
|
&.sketch{
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
const store = useStore();
|
const store = useStore();
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
let canvasType = inject('canvasType')
|
let canvasType = inject('canvasType')
|
||||||
|
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
|
||||||
let canvasGeneral:any = inject('canvasObj')
|
let canvasGeneral:any = inject('canvasObj')
|
||||||
const data:any = reactive({
|
const data:any = reactive({
|
||||||
canvasScaleDom:null,
|
canvasScaleDom:null,
|
||||||
@@ -31,6 +32,9 @@
|
|||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
|
getCanvasIfEdit.fun = ()=>{
|
||||||
|
return canvasGeneral.getElement()
|
||||||
|
}
|
||||||
const createCanvas = (canvasSize:any)=>{
|
const createCanvas = (canvasSize:any)=>{
|
||||||
nextTick(async ()=>{
|
nextTick(async ()=>{
|
||||||
let img = data.selectDetail.undividedLayer
|
let img = data.selectDetail.undividedLayer
|
||||||
@@ -53,8 +57,9 @@
|
|||||||
width:WH.height*wScale,
|
width:WH.height*wScale,
|
||||||
height:WH.height*hScale,
|
height:WH.height*hScale,
|
||||||
}
|
}
|
||||||
|
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
|
||||||
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
|
let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
|
||||||
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
|
await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg,{dashedIsDetail:true})
|
||||||
}
|
}
|
||||||
image.src = img
|
image.src = img
|
||||||
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
|
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
|
||||||
|
|||||||
@@ -87,6 +87,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||||
|
// privewDetail(oldValue)
|
||||||
},{immediate: true})
|
},{immediate: true})
|
||||||
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
||||||
provide('canvasObj',detailData.canvasObj)
|
provide('canvasObj',detailData.canvasObj)
|
||||||
@@ -121,9 +122,9 @@ export default defineComponent({
|
|||||||
detailData.frontBackCanvasObj.currentOperation = false
|
detailData.frontBackCanvasObj.currentOperation = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const privewDetail = async ()=>{
|
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||||
let data = await detailData.canvasObj.detailSubmit()
|
let data = await detailData.canvasObj.detailSubmit()
|
||||||
detailData.selectDetail.partialDesign.partialDesignBase64 = data
|
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
|
||||||
}
|
}
|
||||||
const setFrontBackColor = (data:any)=>{
|
const setFrontBackColor = (data:any)=>{
|
||||||
detailDom.editFrontBack.setBackground(data)
|
detailDom.editFrontBack.setBackground(data)
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
:closable="false"
|
:closable="false"
|
||||||
>
|
>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="nav">
|
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
|
||||||
<div class="back_home">
|
<div class="back_home">
|
||||||
<div class="gallery_btn" @click="closeModal()">
|
<div class="gallery_btn" @click="closeModal()">
|
||||||
<i class="fi fi-rs-house-chimney"></i>
|
<i class="fi fi-rs-house-chimney"></i>
|
||||||
@@ -130,8 +130,12 @@ export default defineComponent({
|
|||||||
childKey:0,
|
childKey:0,
|
||||||
singleOveral:{
|
singleOveral:{
|
||||||
value:'overall'
|
value:'overall'
|
||||||
}
|
},
|
||||||
|
getCanvasIfEdit:{
|
||||||
|
fun:null,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
|
||||||
provide('singleOveral',detailData.singleOveral)
|
provide('singleOveral',detailData.singleOveral)
|
||||||
provide('isEditPattern',detailData.isEditPattern)
|
provide('isEditPattern',detailData.isEditPattern)
|
||||||
const closeModal = ()=>{
|
const closeModal = ()=>{
|
||||||
@@ -142,6 +146,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const showDesignDetailModal = (data:any,str:any)=>{
|
const showDesignDetailModal = (data:any,str:any)=>{
|
||||||
|
// let url = Https.httpUrls.getDesignDetail + `?designItemId=${77770}&designPythonOutfitId=${77423}`
|
||||||
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
|
let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
|
||||||
detailData.loadingShow = true
|
detailData.loadingShow = true
|
||||||
Https.axiosGet(url).then(
|
Https.axiosGet(url).then(
|
||||||
@@ -154,10 +159,20 @@ export default defineComponent({
|
|||||||
item.layersObject[0] = item.layersObject[1]
|
item.layersObject[0] = item.layersObject[1]
|
||||||
item.layersObject[1] = a
|
item.layersObject[1] = a
|
||||||
}
|
}
|
||||||
item.color.rgba = {
|
if(item.color){
|
||||||
r:item.color.r,
|
item.color.rgba = {
|
||||||
g:item.color.g,
|
r:item.color.r,
|
||||||
b:item.color.b,
|
g:item.color.g,
|
||||||
|
b:item.color.b,
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
item.color = {
|
||||||
|
rgba:{
|
||||||
|
r:255,
|
||||||
|
g:255,
|
||||||
|
b:255,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if(item.gradient){
|
if(item.gradient){
|
||||||
item.color.gradient = item.gradient
|
item.color.gradient = item.gradient
|
||||||
@@ -170,14 +185,14 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
})
|
})
|
||||||
detailData.singleOveral.value = rv.singleOverall
|
detailData.singleOveral.value = rv.singleOverall
|
||||||
console.log(detailData.singleOveral)
|
|
||||||
detailData.designDetailShow = true
|
detailData.designDetailShow = true
|
||||||
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
||||||
// this.deleteShow = false
|
// this.deleteShow = false
|
||||||
|
|
||||||
setRevocation()
|
setRevocation()
|
||||||
detailData.loadingShow = false
|
detailData.loadingShow = false
|
||||||
// await this.setImgSize()
|
|
||||||
|
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
|
||||||
}
|
}
|
||||||
|
|
||||||
).catch(rv=>{
|
).catch(rv=>{
|
||||||
@@ -240,6 +255,7 @@ export default defineComponent({
|
|||||||
const setClothes = async (list:any)=>{
|
const setClothes = async (list:any)=>{
|
||||||
let clothesList:any = []
|
let clothesList:any = []
|
||||||
for(let i = 0;i<list.length;i++){
|
for(let i = 0;i<list.length;i++){
|
||||||
|
detailData.selectDetail
|
||||||
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
|
let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
|
||||||
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
|
if(detailDom.canvasBox?.privewDetail)await (detailDom.canvasBox as any).privewDetail()
|
||||||
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||||
@@ -425,13 +441,26 @@ export default defineComponent({
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translate(-50%,-50%);
|
transform: translate(-50%,-50%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
:deep(.ant-modal-wrap){
|
:deep(>div){
|
||||||
.ant-modal-body{
|
> .ant-modal-root{
|
||||||
padding: 0;
|
> .ant-modal-centered{
|
||||||
|
> .fullScreen{
|
||||||
|
> .ant-modal-content{
|
||||||
|
> .ant-modal-body{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.ant-modal-wrap){
|
||||||
|
.ant-modal-body{
|
||||||
|
// padding: 0;
|
||||||
|
}
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// left: 0;
|
||||||
}
|
}
|
||||||
// position: absolute;
|
|
||||||
// top: 0;
|
|
||||||
// left: 0;
|
|
||||||
}
|
}
|
||||||
.content{
|
.content{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -444,7 +473,7 @@ export default defineComponent({
|
|||||||
&.detailLeft{
|
&.detailLeft{
|
||||||
width: 34rem;
|
width: 34rem;
|
||||||
}
|
}
|
||||||
&.isEditPattern{width: 0;}
|
&.isEditPattern{width: 0px;}
|
||||||
&.model{
|
&.model{
|
||||||
width: 50rem;
|
width: 50rem;
|
||||||
margin: 0 10rem;
|
margin: 0 10rem;
|
||||||
@@ -486,6 +515,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .nav{
|
> .nav{
|
||||||
margin-right: 5rem;
|
margin-right: 5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
// transition: all .3s;
|
||||||
|
&.isEditPattern{width: 0px;margin: 0;}
|
||||||
> .back_home{
|
> .back_home{
|
||||||
width: 9rem;
|
width: 9rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="color">
|
<div class="color">
|
||||||
<div class="detailText">Palette</div>
|
<div class="detailText">Current color</div>
|
||||||
<div class="pallet">
|
<div class="pallet">
|
||||||
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
|
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
|
||||||
</div>
|
</div>
|
||||||
<div class="detailText">New color</div>
|
<div class="detailText">Color pelette</div>
|
||||||
<div class="colorBox">
|
<div class="colorBox">
|
||||||
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
|
<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
|
||||||
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
|
<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
|
<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="detailText">Upload Image</div>
|
<div class="detailText">Choose color from image</div>
|
||||||
<div class="uploadImage">
|
<div class="uploadImage">
|
||||||
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
||||||
</div>
|
</div>
|
||||||
@@ -246,18 +246,19 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
> .detailText{
|
> .detailText{
|
||||||
margin-bottom: 1rem;
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
> .pallet{
|
> .pallet{
|
||||||
margin-bottom: 4.5rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
> .colorBox{
|
> .colorBox{
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
> .colorBoxItem{
|
> .colorBoxItem{
|
||||||
margin: 1rem 0;
|
// margin: 1rem 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
width: 32%;
|
width: 32%;
|
||||||
height: 11rem;
|
height: 11rem;
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
|
|||||||
@@ -272,7 +272,7 @@ export default defineComponent({
|
|||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
const backIcon = document.createElement('div');
|
const backIcon = document.createElement('div');
|
||||||
backIcon.classList.add('vc-sketch-color-wrap')
|
backIcon.classList.add('vc-sketch-color-wrap')
|
||||||
let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
|
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
|
||||||
dropperDom.appendChild(backIcon);
|
dropperDom.appendChild(backIcon);
|
||||||
backIcon.addEventListener('click',async ()=>{
|
backIcon.addEventListener('click',async ()=>{
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
accept=".jpg,.png,.jpeg,.bmp"
|
accept=".jpg,.png,.jpeg,.bmp"
|
||||||
>
|
>
|
||||||
<div class="upload_tip_block">
|
<div class="upload_tip_block">
|
||||||
<i class="fi fi-rr-picture"></i>
|
<i class="fi fi-br-upload"></i>
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="detailLeft">
|
<div class="detailLeft">
|
||||||
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
|
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
|
||||||
<print v-show="currentDetailType == 'print'"></print>
|
<print v-show="currentDetailType == 'print'"></print>
|
||||||
<color v-show="currentDetailType == 'color'"></color>
|
<color v-if="currentDetailType == 'color'"></color>
|
||||||
<element v-show="currentDetailType == 'element'"></element>
|
<element v-show="currentDetailType == 'element'"></element>
|
||||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="libraryList">
|
<div class="libraryList">
|
||||||
<div class="generalModel_state">
|
<div class="generalModel_state" v-if="type != 'element'">
|
||||||
<div class="generalModel_state_item">
|
<div class="generalModel_state_item" style="width: 40%;">
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="designType"
|
v-model:value="designType"
|
||||||
:options="designTypeList"
|
:options="designTypeList"
|
||||||
@@ -18,8 +18,10 @@
|
|||||||
></template>
|
></template>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="generalModel_state_item">
|
<div class="generalModel_state_item" style="width: 35%;">
|
||||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
<input class="search_input" style="width: 100%;" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||||
|
</div>
|
||||||
|
<div class="generalModel_state_item" style="width: auto;">
|
||||||
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- clothesPrint -->
|
<!-- clothesPrint -->
|
||||||
@@ -84,6 +86,7 @@ export default defineComponent({
|
|||||||
currentPage:1,
|
currentPage:1,
|
||||||
})
|
})
|
||||||
const init = ()=>{
|
const init = ()=>{
|
||||||
|
console.log(123)
|
||||||
detailData.designTypeList = props.catecoryList
|
detailData.designTypeList = props.catecoryList
|
||||||
detailData.designType = detailData.designTypeList[0].value
|
detailData.designType = detailData.designTypeList[0].value
|
||||||
getLibraryList()
|
getLibraryList()
|
||||||
@@ -207,13 +210,15 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
> .generalModel_state{
|
> .generalModel_state{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
> .generalModel_state_item{
|
> .generalModel_state_item{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
> .search_icon_block{
|
> .search_icon_block{
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
right: 5px;
|
// right: 5px;
|
||||||
width: calc(6rem - 4px);
|
width: calc(6rem - 4px);
|
||||||
height: calc(6rem - 4px);
|
height: calc(6rem - 4px);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -227,7 +232,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .generalModel_state_item:last-child{
|
> .generalModel_state_item:last-child{
|
||||||
margin-top: 2rem;
|
// margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .libraryList_box{
|
> .libraryList_box{
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="selectList">
|
<div class="selectList">
|
||||||
<div class="switch_type_list">
|
<div class="switch_type_list" v-if="type != 'element'">
|
||||||
<div
|
<div
|
||||||
v-if="type != 'element'"
|
|
||||||
@click.stop="openCurrent()"
|
@click.stop="openCurrent()"
|
||||||
class="switch_type_item"
|
class="switch_type_item"
|
||||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||||
@@ -28,7 +27,7 @@
|
|||||||
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
|
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
|
||||||
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_item" v-show="selectTitle == 'upload'">
|
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
|
||||||
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
|
<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
|
||||||
</div>
|
</div>
|
||||||
<div class="content_item" v-show="selectTitle == 'library'">
|
<div class="content_item" v-show="selectTitle == 'library'">
|
||||||
@@ -39,7 +38,7 @@
|
|||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
import { defineComponent,computed,onMounted,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
@@ -78,7 +77,7 @@ export default defineComponent({
|
|||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const detailData = reactive({
|
const detailData = reactive({
|
||||||
selectTitle: props.type == 'element'?'upload':'current',
|
selectTitle: props.type == 'element'?'library':'current',
|
||||||
printList:[]
|
printList:[]
|
||||||
})
|
})
|
||||||
const getDetailListDom = reactive({
|
const getDetailListDom = reactive({
|
||||||
@@ -97,7 +96,11 @@ export default defineComponent({
|
|||||||
const selectImgItem = (data:any)=>{
|
const selectImgItem = (data:any)=>{
|
||||||
emit('selectImgItem',data)
|
emit('selectImgItem',data)
|
||||||
}
|
}
|
||||||
|
onMounted(()=>{
|
||||||
|
if(props.type == 'element'){
|
||||||
|
openLibrary()
|
||||||
|
}
|
||||||
|
})
|
||||||
return{
|
return{
|
||||||
...toRefs(detailData),
|
...toRefs(detailData),
|
||||||
...toRefs(getDetailListDom),
|
...toRefs(getDetailListDom),
|
||||||
|
|||||||
@@ -70,7 +70,9 @@
|
|||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="clearOverall" style="text-align: center; height: 6rem;">
|
||||||
|
<div class="gallery_btn" v-show="!overallSingle && type == 'print'" style="line-height: 5rem;" @click="clearOverall">Clear</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -293,7 +295,6 @@ export default defineComponent({
|
|||||||
let state = true
|
let state = true
|
||||||
editPrintElementData.stateOverallSingle = 'single'
|
editPrintElementData.stateOverallSingle = 'single'
|
||||||
let arr:any = editPrintElementData.selectDetail.printObject.prints
|
let arr:any = editPrintElementData.selectDetail.printObject.prints
|
||||||
console.log(props.type)
|
|
||||||
if(props.type == 'element'){
|
if(props.type == 'element'){
|
||||||
arr = editPrintElementData.selectDetail.printObject.trims
|
arr = editPrintElementData.selectDetail.printObject.trims
|
||||||
}
|
}
|
||||||
@@ -496,8 +497,10 @@ export default defineComponent({
|
|||||||
document.removeEventListener('mouseup',mouseup)
|
document.removeEventListener('mouseup',mouseup)
|
||||||
document.removeEventListener('touchend',mouseup)
|
document.removeEventListener('touchend',mouseup)
|
||||||
}
|
}
|
||||||
|
const clearOverall = ()=>{
|
||||||
|
editPrintElementData.printStyleList[props.type].overall = []
|
||||||
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
console.log(123123)
|
|
||||||
if(props.type == 'element'){
|
if(props.type == 'element'){
|
||||||
editPrintElementData.stateOverallSingle = 'single'
|
editPrintElementData.stateOverallSingle = 'single'
|
||||||
editPrintElementData.overallSingle = true
|
editPrintElementData.overallSingle = true
|
||||||
@@ -516,13 +519,13 @@ export default defineComponent({
|
|||||||
itemSizeMousedown,
|
itemSizeMousedown,
|
||||||
deletePrint,
|
deletePrint,
|
||||||
previewDetailPrintData,
|
previewDetailPrintData,
|
||||||
|
clearOverall,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
//操作旋转
|
//操作旋转
|
||||||
rotote:{
|
rotote:{
|
||||||
mounted(el,value:any){
|
mounted(el,value:any){
|
||||||
console.log(value)
|
|
||||||
let mousedown = function(event:any){
|
let mousedown = function(event:any){
|
||||||
let e = getMousePosition(event,false)
|
let e = getMousePosition(event,false)
|
||||||
mouseDownOperation(e)
|
mouseDownOperation(e)
|
||||||
@@ -680,6 +683,8 @@ export default defineComponent({
|
|||||||
.designOpenrtion_imgMask{
|
.designOpenrtion_imgMask{
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
min-width: 60%;
|
||||||
|
// max-height: 80%;
|
||||||
position: relative;
|
position: relative;
|
||||||
>img{
|
>img{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sketchType">
|
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
|
||||||
<div class="detailText">New Apparel</div>
|
<div class="detailText">New Apparel</div>
|
||||||
<div class="sketchContent">
|
<div class="sketchContent">
|
||||||
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
|
<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
|
||||||
|
|||||||
@@ -12,12 +12,12 @@
|
|||||||
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||||
<!-- 编辑 -->
|
<!-- 编辑 -->
|
||||||
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
|
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
|
||||||
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i>
|
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
|
||||||
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
||||||
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
|
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
|
||||||
|
|
||||||
<!-- 层 -->
|
<!-- 层 -->
|
||||||
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
|
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
|
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
|
||||||
@@ -31,6 +31,7 @@ import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reacti
|
|||||||
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";
|
||||||
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import position from './modelPosition.vue';
|
import position from './modelPosition.vue';
|
||||||
import modelNav from './modelNav.vue';
|
import modelNav from './modelNav.vue';
|
||||||
@@ -40,9 +41,10 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
|
const {t} = useI18n()
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const detailData = reactive({
|
const detailData = reactive({
|
||||||
|
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||||
})
|
})
|
||||||
const setRevocation:any = inject('setRevocation')
|
const setRevocation:any = inject('setRevocation')
|
||||||
const getDetailListData = reactive({
|
const getDetailListData = reactive({
|
||||||
@@ -58,7 +60,31 @@ export default defineComponent({
|
|||||||
return getDetailListDom.position.getSubmitData(value)
|
return getDetailListDom.position.getSubmitData(value)
|
||||||
}
|
}
|
||||||
const showDesignImgDetail = (str:any)=>{
|
const showDesignImgDetail = (str:any)=>{
|
||||||
emit('detailEdit',str)
|
new Promise((resolve, reject) => {
|
||||||
|
if(
|
||||||
|
getDetailListData.isEditPattern.value&&
|
||||||
|
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
|
||||||
|
){
|
||||||
|
Modal.confirm({
|
||||||
|
title: t('collectionModal.jsContent2'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
resolve(true)
|
||||||
|
emit('detailEdit',str)
|
||||||
|
},
|
||||||
|
onCancel(){
|
||||||
|
resolve(false)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
resolve(true)
|
||||||
|
emit('detailEdit',str)
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const deleteItem = ()=>{
|
const deleteItem = ()=>{
|
||||||
setRevocation()
|
setRevocation()
|
||||||
|
|||||||
@@ -33,14 +33,19 @@ export default defineComponent({
|
|||||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||||
frontBack:{} as any,
|
frontBack:{} as any,
|
||||||
isEditPattern:inject('isEditPattern') as any,
|
isEditPattern:inject('isEditPattern') as any,
|
||||||
singleOveral:inject('singleOveral') as any
|
singleOveral:inject('singleOveral') as any,
|
||||||
|
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||||
|
|
||||||
})
|
})
|
||||||
watch(()=>detailData.frontBack_,(newFollowVue)=>{
|
watch(()=>detailData.frontBack_,(newFollowVue)=>{
|
||||||
detailData.frontBack = newFollowVue
|
detailData.frontBack = newFollowVue
|
||||||
})
|
})
|
||||||
const selectDetailItem = (item:any,index:number)=>{
|
const selectDetailItem = (item:any,index:number)=>{
|
||||||
new Promise((resolve, reject) => {
|
new Promise((resolve, reject) => {
|
||||||
if(detailData.isEditPattern.value && detailData.selectDetail?.id){
|
if(detailData.isEditPattern.value &&
|
||||||
|
detailData.selectDetail?.id &&
|
||||||
|
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun()?.length > 0
|
||||||
|
){
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: t('collectionModal.jsContent2'),
|
title: t('collectionModal.jsContent2'),
|
||||||
icon: createVNode(ExclamationCircleOutlined),
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
@@ -58,6 +63,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
resolve(true)
|
resolve(true)
|
||||||
|
emit('canvasReload')
|
||||||
}
|
}
|
||||||
}).then((rv)=>{
|
}).then((rv)=>{
|
||||||
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
|
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="molepositon" :class="{active:!imgDesignImg}">
|
<div class="molepositon" :class="{active:!imgDesignImg}">
|
||||||
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
|
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
|
||||||
<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
||||||
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
||||||
</div>
|
</div>
|
||||||
<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
||||||
<div class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
||||||
<img :src="item.imageUrl" alt="">
|
<img :src="item.imageUrl" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_btn" v-show="singleOveral.value != 'overall'">
|
<div class="designOpenrtion_btn">
|
||||||
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
||||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="designOpenrtion_imgMask" v-else>
|
<div class="designOpenrtion_imgMask" v-else>
|
||||||
<!-- <img src="" alt=""> -->
|
<img :src="selectDetail.undividedLayer" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="molepositon" :class="{active:imgDesignImg}">
|
<div class="molepositon" :class="{active:imgDesignImg}">
|
||||||
@@ -339,6 +339,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return{
|
return{
|
||||||
...toRefs(detailData),
|
...toRefs(detailData),
|
||||||
|
...toRefs(selectItem),
|
||||||
...toRefs(getDetailListDom),
|
...toRefs(getDetailListDom),
|
||||||
|
|
||||||
itemSizeMousedown,
|
itemSizeMousedown,
|
||||||
@@ -407,9 +408,10 @@ export default defineComponent({
|
|||||||
>img{
|
>img{
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: relative;
|
position: relative;
|
||||||
// width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
>div{
|
>div{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -426,11 +428,6 @@ export default defineComponent({
|
|||||||
user-select:none;
|
user-select:none;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
&.active{
|
|
||||||
> img{
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal_imgItem{
|
.modal_imgItem{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@@ -17,7 +17,6 @@
|
|||||||
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header_right_block" @click.stop="">
|
<div class="header_right_block" @click.stop="">
|
||||||
<div class="next_step_button" @click.stop="finishCropper()">{{ $t('Cropper.Finish') }}</div>
|
|
||||||
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
|
<div class="header_cancel_button" @click.stop="cancleCropper()">{{ $t('Cropper.Cancel') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -54,7 +53,7 @@
|
|||||||
<div class="review_logo icon iconfont icon-yulan"></div>
|
<div class="review_logo icon iconfont icon-yulan"></div>
|
||||||
<div>{{ $t('Cropper.CropPreview') }}</div>
|
<div>{{ $t('Cropper.CropPreview') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="cut_picture_review_block">
|
<div class="cut_picture_review_block" :style="{'width': previews.w + 'px', 'height': previews.h + 'px'}">
|
||||||
<div class="cut_picture_review_item">
|
<div class="cut_picture_review_item">
|
||||||
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
<div class="cut_picture_review_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||||
<div :style="previews.div">
|
<div :style="previews.div">
|
||||||
@@ -62,6 +61,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="next_step_button" @click.stop="finishCropper()">
|
||||||
|
<!-- <i class="fi fi-rr-check"></i> -->
|
||||||
|
<i class="fi fi-sr-check-circle"></i>
|
||||||
|
</div>
|
||||||
<!-- <div class="cut_picture_review_item">
|
<!-- <div class="cut_picture_review_item">
|
||||||
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
<div class="cut_picture_review_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||||
<div :style="previews.div" >
|
<div :style="previews.div" >
|
||||||
@@ -206,11 +209,10 @@ export default defineComponent({
|
|||||||
padding: 0 calc(1.2rem*1.2);
|
padding: 0 calc(1.2rem*1.2);
|
||||||
height: calc(3.2rem*1.2);
|
height: calc(3.2rem*1.2);
|
||||||
// background: linear-gradient(160deg, #AC2A3B, #292161);
|
// background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||||
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
border-radius: calc(1.6rem*1.2);
|
border-radius: calc(1.6rem*1.2);
|
||||||
font-size: calc(1.4rem*1.2);
|
font-size: calc(1.4rem*1.2);
|
||||||
color: #000;
|
|
||||||
line-height: calc(3.2rem*1.2);
|
line-height: calc(3.2rem*1.2);
|
||||||
margin-right: calc(1.6rem*1.2);
|
margin-right: calc(1.6rem*1.2);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -237,10 +239,16 @@ export default defineComponent({
|
|||||||
// background: #F2F3FB;
|
// background: #F2F3FB;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.cut_picture_right,.cut_picture_left{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
.cut_picture_left{
|
.cut_picture_left{
|
||||||
width: calc(70.7rem*1.2);
|
width: calc(70.7rem*1.2);
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: calc(2rem*1.2);
|
border-radius: calc(2rem*1.2);
|
||||||
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
|
padding: calc(1.3rem*1.2) calc(1.3rem*1.2) calc(2rem*1.2);
|
||||||
@@ -301,12 +309,12 @@ export default defineComponent({
|
|||||||
.cut_picture_right{
|
.cut_picture_right{
|
||||||
// width: 39.2rem;
|
// width: 39.2rem;
|
||||||
width: calc(52rem*1.2);
|
width: calc(52rem*1.2);
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: calc(2rem*1.2);
|
border-radius: calc(2rem*1.2);
|
||||||
|
margin-block: -5rem;
|
||||||
.cur_picture_right_header{
|
.cur_picture_right_header{
|
||||||
padding: calc(2rem*1.2);
|
// padding: calc(2rem*1.2);
|
||||||
|
padding: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: var(--aida-fsize1-8);
|
font-size: var(--aida-fsize1-8);
|
||||||
@@ -324,9 +332,25 @@ export default defineComponent({
|
|||||||
|
|
||||||
.cut_picture_review_block{
|
.cut_picture_review_block{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 calc(2rem*1.2);
|
|
||||||
height: calc(100% - 6.8rem*1.2);
|
height: calc(100% - 6.8rem*1.2);
|
||||||
|
margin: 0 auto;
|
||||||
|
.next_step_button{
|
||||||
|
margin-top: 2rem;
|
||||||
|
i{
|
||||||
|
display: flex;
|
||||||
|
// height: 4rem;
|
||||||
|
// width: 4rem;
|
||||||
|
// background: #000;
|
||||||
|
// color: #fff;
|
||||||
|
font-weight: 900;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
.cut_picture_review_item{
|
.cut_picture_review_item{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 50%;
|
// height: 50%;
|
||||||
@@ -338,7 +362,7 @@ export default defineComponent({
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: scale(0.8) translate(-50%, -50%);
|
transform: scale(1) translate(-50%, -50%);
|
||||||
background: rgba(91,94,105,0.8);
|
background: rgba(91,94,105,0.8);
|
||||||
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
box-shadow: 0 calc(0.2rem*1.2) calc(0.5rem*1.2) 0 rgba(216,213,239,0.3);
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
|
|||||||
@@ -39,7 +39,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<!-- <input
|
||||||
class="search_input"
|
class="search_input"
|
||||||
@input="ifMaximumLength"
|
@input="ifMaximumLength"
|
||||||
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
|
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
|
||||||
@@ -48,7 +48,18 @@
|
|||||||
@keydown.enter="getgenerate()"
|
@keydown.enter="getgenerate()"
|
||||||
@click="inputFocus()"
|
@click="inputFocus()"
|
||||||
@paste="onPaste"
|
@paste="onPaste"
|
||||||
/>
|
/> -->
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
@input="ifMaximumLength"
|
||||||
|
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
|
||||||
|
:maxlength='inputShow?0:9999'
|
||||||
|
@keydown.enter.prevent="getgenerate()"
|
||||||
|
@click="inputFocus()"
|
||||||
|
v-model="searchPictureName"
|
||||||
|
@paste="onPaste"
|
||||||
|
|
||||||
|
></textarea>
|
||||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||||
<a-upload
|
<a-upload
|
||||||
class="search_upImg"
|
class="search_upImg"
|
||||||
@@ -68,8 +79,8 @@
|
|||||||
</a-upload>
|
</a-upload>
|
||||||
</i>
|
</i>
|
||||||
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
|
||||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
|
||||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
|
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="input_box_btnBox sketch" v-else>
|
<div class="input_box_btnBox sketch" v-else>
|
||||||
<div class="upload_item" v-show="sketchboardList.length > 0">
|
<div class="upload_item" v-show="sketchboardList.length > 0">
|
||||||
@@ -91,7 +102,7 @@
|
|||||||
>
|
>
|
||||||
<img :src="file?.imgUrl" class="upload_img" />
|
<img :src="file?.imgUrl" class="upload_img" />
|
||||||
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
|
||||||
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
|
<i class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -127,8 +138,10 @@
|
|||||||
@click.stop=""
|
@click.stop=""
|
||||||
v-model="searchPictureName"
|
v-model="searchPictureName"
|
||||||
></textarea>
|
></textarea>
|
||||||
<div class="generage_btn_box" v-show="!isGenerate">
|
<div class="generage_btn_box">
|
||||||
<div class="generage_btn started_btn">
|
<div class="generage_btn started_btn" v-show="!isGenerate">
|
||||||
|
<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
|
||||||
|
<!--
|
||||||
<div :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
|
<div :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click.stop="getgenerate">
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
@@ -139,22 +152,29 @@
|
|||||||
{{ speedData.label }}
|
{{ speedData.label }}
|
||||||
</span>
|
</span>
|
||||||
<span v-else>{{ $t('Generate.Generate') }}</span>
|
<span v-else>{{ $t('Generate.Generate') }}</span>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="icon iconfont icon-xiala" v-show="
|
<div class="icon iconfont icon-xiala" v-show="
|
||||||
type_.type2 == 'Moodboard' ||
|
type_.type2 == 'Moodboard' ||
|
||||||
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
|
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
|
||||||
(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :class="{active:speedState}" @click.stop="openSpeed"></div>
|
(type_.type2 == 'Sketchboard' && scene?.value == 'generate')" :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>
|
||||||
<div class="content" v-show="speedState">
|
<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
|
||||||
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
<i class="fi fi-br-loading" ></i>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
|
||||||
|
{{$t('Generate.Close')}}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
|
<!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
|
||||||
<i class="fi fi-br-loading"></i>
|
<i class="fi fi-br-loading"></i>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
|
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
|
||||||
{{$t('Generate.Close')}}
|
{{$t('Generate.Close')}}
|
||||||
</div>
|
</div> -->
|
||||||
<span class="inputShowText" ref="inputShowText"></span>
|
<span class="inputShowText" ref="inputShowText"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
|
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
|
||||||
@@ -273,20 +293,20 @@ export default defineComponent({
|
|||||||
let speed = reactive({
|
let speed = reactive({
|
||||||
speedList:[
|
speedList:[
|
||||||
{
|
{
|
||||||
title:'Picture quality is average, speed is fast',
|
title:'Generate image in fast speed normal quality',
|
||||||
label:'Low Quality',
|
label:'Normal',
|
||||||
value:'fast',
|
value:'fast',
|
||||||
|
|
||||||
},{
|
},{
|
||||||
title:'Picture quality is high, speed is slow',
|
title:'Generate image in high quality low speed',
|
||||||
label:'High Quality',
|
label:'High',
|
||||||
value:'high',
|
value:'high',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
speedState:false,
|
speedState:false,
|
||||||
speedData:{
|
speedData:{
|
||||||
title:'Picture quality is average, speed is fast',
|
title:'Generate image in fast speed normal quality',
|
||||||
label:'Low Quality',
|
label:'Normal',
|
||||||
value:'fast',
|
value:'fast',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@@ -646,7 +666,7 @@ export default defineComponent({
|
|||||||
let dataNum = dataList.length
|
let dataNum = dataList.length
|
||||||
let state = true
|
let state = true
|
||||||
this.generateTime = setInterval(()=>{
|
this.generateTime = setInterval(()=>{
|
||||||
if(!this.isGenerate || this.remGenerate)return
|
if(!this.isGenerate || !this.remGenerate)return
|
||||||
if(!state)return
|
if(!state)return
|
||||||
state = false
|
state = false
|
||||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||||
@@ -753,10 +773,25 @@ export default defineComponent({
|
|||||||
this.searchPictureSeed = 0
|
this.searchPictureSeed = 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ifMaximumLength(){
|
ifMaximumLength(event:any){
|
||||||
clearTimeout(this.inputTime)
|
clearTimeout(this.inputTime)
|
||||||
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
|
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
|
||||||
let input = inputBox.getElementsByClassName('search_input')[0]
|
let input = inputBox.getElementsByClassName('search_input')[0]
|
||||||
|
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);
|
||||||
|
|
||||||
|
// 5. 应用新高度并恢复滚动位置
|
||||||
|
textarea.style.height = newHeight + 'px';
|
||||||
|
textarea.scrollTop = scrollTop;
|
||||||
this.inputTime = setTimeout(()=>{
|
this.inputTime = setTimeout(()=>{
|
||||||
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
|
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
|
||||||
// let num2 = (input as HTMLInputElement).value.split(' ').length
|
// let num2 = (input as HTMLInputElement).value.split(' ').length
|
||||||
@@ -957,8 +992,9 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
// padding-top: calc(2.5rem*1.2);
|
// padding-top: calc(2.5rem*1.2);
|
||||||
.input_border{
|
.input_border{//输入框
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mark_loading{
|
.mark_loading{
|
||||||
@@ -1011,8 +1047,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
width: calc(10rem*1.2);
|
// width: calc(10rem*1.2);
|
||||||
height: calc(10rem*1.2);
|
// height: calc(10rem*1.2);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
&:hover .delete_like_file_block{
|
&:hover .delete_like_file_block{
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<div class="my_material_header">
|
<div class="my_material_header">
|
||||||
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
|
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
|
||||||
<div class="select_block">
|
<div class="select_block">
|
||||||
<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
|
<generalMenu selectWidth="15rem" :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
|
||||||
<!-- <a-select
|
<!-- <a-select
|
||||||
ref="select"
|
ref="select"
|
||||||
v-model:value="disignType"
|
v-model:value="disignType"
|
||||||
|
|||||||
@@ -199,9 +199,8 @@ export default defineComponent({
|
|||||||
.collection_review{
|
.collection_review{
|
||||||
// width: 40.8rem;
|
// width: 40.8rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
.collection_review_mark{
|
.collection_review_mark{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -213,7 +212,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
.img_block_item{
|
.img_block_item{
|
||||||
margin-bottom: 2rem;
|
|
||||||
// &.color_block_item{
|
// &.color_block_item{
|
||||||
// padding: 0 0.5rem 0 0.3rem;
|
// padding: 0 0.5rem 0 0.3rem;
|
||||||
// }
|
// }
|
||||||
|
|||||||
@@ -656,7 +656,7 @@ export default defineComponent({
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
>div{
|
>div{
|
||||||
width: 14rem;
|
width: 18rem;
|
||||||
font-size: var(--aida-fsize1-6);
|
font-size: var(--aida-fsize1-6);
|
||||||
border: 0;
|
border: 0;
|
||||||
i{
|
i{
|
||||||
@@ -669,7 +669,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul{
|
ul{
|
||||||
width: 14rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.switch_type_item:nth-child(3){
|
.switch_type_item:nth-child(3){
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="generalMenu_printModel">
|
<div class="generalMenu_printModel">
|
||||||
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="$props.style_">
|
<div @click.stop="openPrintModel" :class="driverClass.class1" :style="{...$props.style_,'width':selectWidth}">
|
||||||
<a-popover v-if="isCanvas">
|
<a-popover v-if="isCanvas">
|
||||||
<template #content>
|
<template #content>
|
||||||
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
||||||
@@ -15,12 +15,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
|
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
|
||||||
</div>
|
</div>
|
||||||
<ul :class="driverClass.class2" v-show="openClick">
|
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
|
||||||
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
|
<li v-for="listItem,index in dataList" :class="{active:deleteItem == index,hover:((item?.label && item?.label == listItem?.label) || (item?.name && item?.name == listItem?.name))}" class="printModel_item" @click="setprintModel(listItem,index)">
|
||||||
<a-popover placement="right" v-if="isCanvas">
|
<a-popover placement="right" v-if="isCanvas">
|
||||||
<template #content>
|
<template #content>
|
||||||
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
|
<!-- <span v-if="item.img != -1 && index == dataList?.length -1 " class="icon iconfont icon-shanchu" style="cursor: pointer; position: absolute; right: 10px; top: 10px;" @click.stop="deleteFile(item)"></span> -->
|
||||||
<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
<img v-if="listItem.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
||||||
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
|
<!-- <div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
|
||||||
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
|
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
|
||||||
<a-upload
|
<a-upload
|
||||||
@@ -43,12 +43,12 @@
|
|||||||
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<span v-if="item?.label">{{ item?.label }}</span>
|
<span v-if="listItem?.label">{{ listItem?.label }}</span>
|
||||||
<span v-else>{{ item?.name }}</span>
|
<span v-else>{{ listItem?.name }}</span>
|
||||||
</a-popover>
|
</a-popover>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<span v-if="item?.label">{{ item?.label }}</span>
|
<span v-if="listItem?.label">{{ listItem?.label }}</span>
|
||||||
<span v-else>{{ item?.name }}</span>
|
<span v-else>{{ listItem?.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -90,6 +90,10 @@ import { message, Upload, Modal } from "ant-design-vue";
|
|||||||
style_:{
|
style_:{
|
||||||
type:Object,
|
type:Object,
|
||||||
default:{}
|
default:{}
|
||||||
|
},
|
||||||
|
selectWidth:{
|
||||||
|
type:String,
|
||||||
|
default:'20rem'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
emits:['setprintModel'],
|
emits:['setprintModel'],
|
||||||
@@ -200,7 +204,7 @@ import { message, Upload, Modal } from "ant-design-vue";
|
|||||||
//衣服类型下拉菜单
|
//衣服类型下拉菜单
|
||||||
.generalMenu_printModel{
|
.generalMenu_printModel{
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
height: 6rem;
|
height: 5rem;
|
||||||
.icon-xiala{
|
.icon-xiala{
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
@@ -212,11 +216,11 @@ import { message, Upload, Modal } from "ant-design-vue";
|
|||||||
// display: flex;
|
// display: flex;
|
||||||
display: block;
|
display: block;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
border-radius: 4rem;
|
border-radius: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 1.5rem 2rem;
|
padding: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
@@ -239,7 +243,6 @@ import { message, Upload, Modal } from "ant-design-vue";
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
text-align: center;
|
|
||||||
margin-top: calc(.3rem*1.2);
|
margin-top: calc(.3rem*1.2);
|
||||||
border-radius: calc(1rem*1.2);
|
border-radius: calc(1rem*1.2);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -265,6 +268,10 @@ import { message, Upload, Modal } from "ant-design-vue";
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
&.hover{
|
||||||
|
background: #f3f3f6;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
:deep(.icon-shanchu){
|
:deep(.icon-shanchu){
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<workflow v-else ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
|
<workflow v-if="selectObject?.type" ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
<div class="mark_loading" v-show="isShowMark">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
@@ -113,10 +113,11 @@ export default defineComponent({
|
|||||||
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
||||||
//取出数组对象某个值
|
//取出数组对象某个值
|
||||||
let storeData = {
|
let storeData = {
|
||||||
name:'测试项目',
|
name:rv.name,
|
||||||
id:rv.id,
|
id:rv.id,
|
||||||
type:type?.value,
|
type:type?.value,
|
||||||
httpType:rv.process,//项目类型
|
httpType:rv.process,//项目类型
|
||||||
|
ageGroup:rv.workspaceVO.ageGroup,
|
||||||
style:rv.workspaceVO.style,
|
style:rv.workspaceVO.style,
|
||||||
styleId:rv.workspaceVO.styleId,
|
styleId:rv.workspaceVO.styleId,
|
||||||
styleName:rv.workspaceVO.styleName,
|
styleName:rv.workspaceVO.styleName,
|
||||||
|
|||||||
@@ -655,15 +655,17 @@ export default defineComponent({
|
|||||||
|
|
||||||
setColorboardList(colorList){
|
setColorboardList(colorList){
|
||||||
let newColorList = colorList.map((v)=>{
|
let newColorList = colorList.map((v)=>{
|
||||||
|
console.log(v)
|
||||||
let data = {
|
let data = {
|
||||||
id:'',
|
id:'',
|
||||||
name:'',
|
name:v?.name?v?.name:'',
|
||||||
rgbValue:v.rgba,
|
rgbValue:v.rgba,
|
||||||
gradient:v.gradient,
|
gradient:v.gradient,
|
||||||
|
|
||||||
}
|
}
|
||||||
return data
|
return data
|
||||||
})
|
})
|
||||||
|
console.log(123)
|
||||||
this.store.commit('setColorboardList',newColorList)
|
this.store.commit('setColorboardList',newColorList)
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -671,11 +673,11 @@ export default defineComponent({
|
|||||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||||
let hex
|
let hex
|
||||||
colorList.forEach((ele, index) => {
|
colorList.forEach((ele, index) => {
|
||||||
|
this.colorList[index] = ele
|
||||||
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
|
hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
|
||||||
this.colorList[index].rgba = ele.rgbValue
|
this.colorList[index].rgba = ele.rgbValue
|
||||||
this.colorList[index].gradient = ele.gradient
|
this.colorList[index].gradient = ele.gradient
|
||||||
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
|
this.colorList[index].name = ele.name
|
||||||
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
|
|
||||||
});
|
});
|
||||||
if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
|
if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
|
||||||
this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
|
this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
|
||||||
@@ -974,7 +976,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.fi-rr-square-plus,.fi-rr-picture{
|
.fi-rr-square-plus,.fi-rr-picture{
|
||||||
zoom: 7.5;
|
zoom: 6;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
|
|||||||
@@ -339,6 +339,7 @@ export default defineComponent({
|
|||||||
deleteFile(item: any) {
|
deleteFile(item: any) {
|
||||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
||||||
|
item.state = 'delete'
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
this.store.commit("addGenerateMaterialFils", item);
|
||||||
}else{
|
}else{
|
||||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||||
|
|||||||
@@ -384,6 +384,7 @@ export default defineComponent({
|
|||||||
// this.store.commit('setPrintboardFile',this.fileList)
|
// this.store.commit('setPrintboardFile',this.fileList)
|
||||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
|
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
|
||||||
|
item.state = 'delete'
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
this.store.commit("addGenerateMaterialFils", item);
|
||||||
}else{
|
}else{
|
||||||
this.fileList = this.store.state.UploadFilesModule.printboardFiles
|
this.fileList = this.store.state.UploadFilesModule.printboardFiles
|
||||||
|
|||||||
@@ -465,6 +465,7 @@ export default defineComponent({
|
|||||||
deleteFile(item: any) {
|
deleteFile(item: any) {
|
||||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||||
|
item.state = 'delete'
|
||||||
this.store.commit("addGenerateMaterialFils", item);
|
this.store.commit("addGenerateMaterialFils", item);
|
||||||
}else{
|
}else{
|
||||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
||||||
@@ -658,7 +659,7 @@ export default defineComponent({
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
>div{
|
>div{
|
||||||
width: 14rem;
|
width: 18rem;
|
||||||
font-size: var(--aida-fsize1-6);
|
font-size: var(--aida-fsize1-6);
|
||||||
border: 0;
|
border: 0;
|
||||||
i{
|
i{
|
||||||
@@ -671,7 +672,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul{
|
ul{
|
||||||
width: 14rem;
|
width: 18rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.switch_type_item:nth-child(3){
|
.switch_type_item:nth-child(3){
|
||||||
|
|||||||
@@ -1,5 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="canvasArgument">
|
<div class="canvasArgument">
|
||||||
|
<div class="label_item">
|
||||||
|
<div >{{ $t('exportModel.Layer') }}:</div>
|
||||||
|
<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
|
||||||
|
<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
|
||||||
|
<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
|
||||||
|
<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
|
||||||
|
</div>
|
||||||
<div class="label_item" v-show="
|
<div class="label_item" v-show="
|
||||||
canvasGeneral.operation != 'movePosition' &&
|
canvasGeneral.operation != 'movePosition' &&
|
||||||
canvasGeneral.operation != 'move' &&
|
canvasGeneral.operation != 'move' &&
|
||||||
@@ -77,6 +84,7 @@
|
|||||||
<span style="margin-right: 2rem;">Show Models</span>
|
<span style="margin-right: 2rem;">Show Models</span>
|
||||||
<a-switch v-model:checked="isShowBg" @change="showBg" />
|
<a-switch v-model:checked="isShowBg" @change="showBg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
|
import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
|
||||||
import { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
@@ -31,8 +31,12 @@
|
|||||||
const dataDom = reactive({
|
const dataDom = reactive({
|
||||||
canvasScaleDom:null as any,
|
canvasScaleDom:null as any,
|
||||||
})
|
})
|
||||||
|
watch(()=>data.selectObject.model.id,(newVal:any)=>{
|
||||||
|
if(newVal){
|
||||||
|
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
|
||||||
|
}
|
||||||
|
})
|
||||||
const createCanvas = ()=>{
|
const createCanvas = ()=>{
|
||||||
console.log(123123,data.isCanvas)
|
|
||||||
if(data.isCanva)return
|
if(data.isCanva)return
|
||||||
nextTick(async ()=>{
|
nextTick(async ()=>{
|
||||||
let width = dataDom.canvasScaleDom.offsetWidth
|
let width = dataDom.canvasScaleDom.offsetWidth
|
||||||
|
|||||||
@@ -9,9 +9,17 @@
|
|||||||
<div class="designPage_left" ref="hidden">
|
<div class="designPage_left" ref="hidden">
|
||||||
<div class="designPage_left_content" :class="{'active':(domHidden)}">
|
<div class="designPage_left_content" :class="{'active':(domHidden)}">
|
||||||
<!-- 有图状态 start-->
|
<!-- 有图状态 start-->
|
||||||
|
|
||||||
<div class="home_left_info">
|
<div class="home_left_info">
|
||||||
<div class="left_info_content scroll_style">
|
<div class="left_info_content scroll_style">
|
||||||
<div class="left_info_content_body" ref="collection_canvas">
|
<div class="left_info_content_body" ref="collection_canvas">
|
||||||
|
<div class="right_content_header">
|
||||||
|
<div class="content_header_left" style="padding-top: 2rem;">
|
||||||
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||||
|
{{ $t('HomeView.elementTitle') }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<NewCollectionReview id="collectionReview"></NewCollectionReview>
|
<NewCollectionReview id="collectionReview"></NewCollectionReview>
|
||||||
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
|
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
|
||||||
|
|
||||||
@@ -36,15 +44,15 @@
|
|||||||
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
||||||
{{ $t('HomeView.Design') }}
|
{{ $t('HomeView.Design') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
|
||||||
@click="resDesignCollection()">
|
@click="resDesignCollection()">
|
||||||
{{ $t('HomeView.Redesign') }}
|
{{ $t('HomeView.Redesign') }}
|
||||||
</div>
|
</div> -->
|
||||||
<div class="silder button_margin_14" v-show="designCollectionId">
|
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
|
||||||
<div class="text">Small</div>
|
<div class="text">Small</div>
|
||||||
<a-slider
|
<a-slider
|
||||||
class="system_silder"
|
class="system_silder"
|
||||||
v-model:value="collValue"
|
v-model:value="elementWidth"
|
||||||
:min="minCollValue"
|
:min="minCollValue"
|
||||||
:max="maxCollValue-1"
|
:max="maxCollValue-1"
|
||||||
@afterChange="setSystemDesigner(500)"
|
@afterChange="setSystemDesigner(500)"
|
||||||
@@ -53,10 +61,9 @@
|
|||||||
</a-slider>
|
</a-slider>
|
||||||
<div class="text">Big</div>
|
<div class="text">Big</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
<!-- <div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
||||||
<!-- {{ $t('HomeView.Export') }} -->
|
|
||||||
{{$t('HomeView.FinalizeCollection')}}
|
{{$t('HomeView.FinalizeCollection')}}
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right_content_block_box">
|
<div class="right_content_block_box">
|
||||||
@@ -73,7 +80,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right_content_img_block scroll_style active">
|
<div class="right_content_img_block scroll_style active">
|
||||||
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
|
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
|
||||||
|
|
||||||
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
|
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
|
||||||
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
||||||
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
|
@mousedown.stop="designMousedown(getMousePosition($event,false),design.userLikeSortId,'like')"
|
||||||
@@ -334,9 +340,11 @@ export default defineComponent({
|
|||||||
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
|
let sessionStorageCollValue = JSON.parse(sessionStorage.getItem('collValue') as any)
|
||||||
|
|
||||||
const collItemSize = reactive({
|
const collItemSize = reactive({
|
||||||
collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
|
collValue:6,
|
||||||
minCollValue:4,
|
elementWidth:100,
|
||||||
maxCollValue:20,
|
minCollValue:100,
|
||||||
|
maxCollValue:999,
|
||||||
|
padding:60,
|
||||||
likeStyle:{
|
likeStyle:{
|
||||||
width:'240px',
|
width:'240px',
|
||||||
height:'370px',
|
height:'370px',
|
||||||
@@ -370,14 +378,18 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
let getDesignTime = null as any;
|
let getDesignTime = null as any;
|
||||||
const setSystemDesigner = (time:any)=>{
|
const setSystemDesigner = (time:any)=>{
|
||||||
|
|
||||||
clearTimeout(collItemSize.collTime)
|
clearTimeout(collItemSize.collTime)
|
||||||
collItemSize.collTime = setTimeout(()=>{
|
collItemSize.collTime = setTimeout(()=>{
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
let parentWidth = likeItemDom.value.parentElement.offsetWidth
|
let parentWidth = likeItemDom.value.parentElement.offsetWidth
|
||||||
collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
|
collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
|
||||||
collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
|
collItemSize.maxCollValue = parentWidth / 2
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
|
||||||
collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
|
collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.elementWidth))
|
||||||
|
let value = collItemSize.collValue
|
||||||
|
|
||||||
|
collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
|
||||||
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
|
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
|
||||||
|
|
||||||
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
|
collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
|
||||||
@@ -476,6 +488,7 @@ export default defineComponent({
|
|||||||
//排序 从大到小
|
//排序 从大到小
|
||||||
const sortDesignCollection = ()=> {
|
const sortDesignCollection = ()=> {
|
||||||
let arrData:any = []
|
let arrData:any = []
|
||||||
|
if(!likeDesignCollectionList.value)return
|
||||||
likeDesignCollectionList.value.forEach((likeItem:any)=>{
|
likeDesignCollectionList.value.forEach((likeItem:any)=>{
|
||||||
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
|
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
|
||||||
likeItem.sort = item.sort + 1
|
likeItem.sort = item.sort + 1
|
||||||
@@ -499,7 +512,7 @@ export default defineComponent({
|
|||||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||||
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
|
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
|
||||||
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
|
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
let value = collItemSize.collValue
|
||||||
let width,height,num
|
let width,height,num
|
||||||
if(str == 'like'){
|
if(str == 'like'){
|
||||||
num = value
|
num = value
|
||||||
@@ -579,14 +592,14 @@ export default defineComponent({
|
|||||||
const moveItem = (str:any)=>{
|
const moveItem = (str:any)=>{
|
||||||
let elLikeList = posiitonData.value.likeElList
|
let elLikeList = posiitonData.value.likeElList
|
||||||
let generateElList = posiitonData.value.generateElList
|
let generateElList = posiitonData.value.generateElList
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
let value = collItemSize.collValue
|
||||||
let width,height
|
let width,height
|
||||||
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
|
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
|
||||||
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
|
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
|
||||||
|
|
||||||
// let num = str == 'like'?value:3
|
// let num = str == 'like'?value:3
|
||||||
for(let i = 0;i < elLikeList.length;i++){
|
for(let i = 0;i < elLikeList.length;i++){
|
||||||
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
|
elLikeList[i].el.style.left = (elLikeList.length - 1 - elLikeList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
|
||||||
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
|
elLikeList[i].el.style.top = parseInt(String((elLikeList.length - 1 - elLikeList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
|
||||||
}
|
}
|
||||||
for(let i = 0;i < generateElList.length;i++){
|
for(let i = 0;i < generateElList.length;i++){
|
||||||
@@ -820,18 +833,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
//设计新的collection
|
//设计新的collection
|
||||||
designNewCollection() {
|
designNewCollection() {
|
||||||
if(!this.chooseIsDesign.value){
|
|
||||||
message.info(this.t('HomeView.jsContent10'));
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let { colorBoards } =
|
|
||||||
this.store.state.UploadFilesModule.allBoardData;
|
|
||||||
if (!colorBoards || colorBoards?.length < 1) {
|
|
||||||
message.info(
|
|
||||||
this.t('HomeView.jsContent1')
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
clearTimeout(this.getDesignTime);
|
clearTimeout(this.getDesignTime);
|
||||||
let data = this.getDesignData("");
|
let data = this.getDesignData("");
|
||||||
if(this.driver__.driver){
|
if(this.driver__.driver){
|
||||||
@@ -840,7 +841,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
this.store.commit("setLikeDesignCollectionList", []);
|
// this.store.commit("setLikeDesignCollectionList", []);
|
||||||
Https.axiosPost(Https.httpUrls.designCollection, data)
|
Https.axiosPost(Https.httpUrls.designCollection, data)
|
||||||
|
|
||||||
.then((rv: any) => {
|
.then((rv: any) => {
|
||||||
@@ -856,8 +857,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
this.getDesignResult(value,'newDesign')
|
this.getDesignResult(value,'newDesign')
|
||||||
this.startDesignType = "design";
|
this.startDesignType = "design";
|
||||||
this.posiitonData.likeSelectIndex = 0
|
// this.posiitonData.likeSelectIndex = 0
|
||||||
this.posiitonData.likeElList = []
|
// this.posiitonData.likeElList = []
|
||||||
}
|
}
|
||||||
this.isShowMark = false;
|
this.isShowMark = false;
|
||||||
})
|
})
|
||||||
@@ -906,7 +907,7 @@ export default defineComponent({
|
|||||||
this.showDesignMark = false
|
this.showDesignMark = false
|
||||||
if(str == 'newDesign'){
|
if(str == 'newDesign'){
|
||||||
if(rv.designCollectionItems){
|
if(rv.designCollectionItems){
|
||||||
this.store.commit("deleteUserGroupId");
|
// this.store.commit("deleteUserGroupId");
|
||||||
this.store.commit(
|
this.store.commit(
|
||||||
"setDesignCollectionId",
|
"setDesignCollectionId",
|
||||||
rv.collectionId
|
rv.collectionId
|
||||||
@@ -941,14 +942,6 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
//重新设计collection
|
//重新设计collection
|
||||||
resDesignCollection() {
|
resDesignCollection() {
|
||||||
let { colorBoards } =
|
|
||||||
this.store.state.UploadFilesModule.allBoardData;
|
|
||||||
if (!colorBoards || colorBoards?.length < 1) {
|
|
||||||
message.info(
|
|
||||||
this.t('HomeView.jsContent2')
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(this.driver__.driver){
|
if(this.driver__.driver){
|
||||||
nextTick().then(()=>{
|
nextTick().then(()=>{
|
||||||
driverObj__.moveNext();
|
driverObj__.moveNext();
|
||||||
@@ -1131,7 +1124,8 @@ export default defineComponent({
|
|||||||
likeDesignCollection(design: any, index: any) {
|
likeDesignCollection(design: any, index: any) {
|
||||||
let data = {
|
let data = {
|
||||||
designItemId: design.designItemId,
|
designItemId: design.designItemId,
|
||||||
userGroupId: this.userGroupId,
|
userGroupId: this.store.state.HomeStoreModule.userGroupId,
|
||||||
|
projectId: this.store.state.Workspace.probjects.id,
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||||||
};
|
};
|
||||||
@@ -1178,7 +1172,7 @@ export default defineComponent({
|
|||||||
let data = {
|
let data = {
|
||||||
designId: design.designId || this.designId,
|
designId: design.designId || this.designId,
|
||||||
designPythonOutfitId:design.designOutfitId,
|
designPythonOutfitId:design.designOutfitId,
|
||||||
groupDetailId: design.groupDetailId,
|
groupDetailId: design.groupDetailId || design.id,
|
||||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
};
|
};
|
||||||
if (this.disLikeLoading) {
|
if (this.disLikeLoading) {
|
||||||
@@ -1392,6 +1386,9 @@ export default defineComponent({
|
|||||||
if(button == 'design'){
|
if(button == 'design'){
|
||||||
this.designNewCollection()
|
this.designNewCollection()
|
||||||
}
|
}
|
||||||
|
nextTick(()=>{
|
||||||
|
this.setSystemDesigner(100)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
//销毁图片详情
|
//销毁图片详情
|
||||||
setDetailDestroy() {
|
setDetailDestroy() {
|
||||||
@@ -1504,6 +1501,62 @@ export default defineComponent({
|
|||||||
// padding-bottom: 4rem;
|
// padding-bottom: 4rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
z-index:1;
|
z-index:1;
|
||||||
|
.right_content_header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 4.5rem;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 3.2rem 0 1.9rem;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
position: relative;
|
||||||
|
.right_content_export{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.icon-xiala{
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .3s all;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
.icon_rotate{
|
||||||
|
-moz-transform: rotate(180deg);
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
animation-direction: 0.5s;
|
||||||
|
}
|
||||||
|
.export_nav{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 5.5rem;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
border: 2px solid;
|
||||||
|
z-index: 2;
|
||||||
|
label{
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_header_left {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-dangqianweizhi {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content_header_des {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.designPage_body {
|
.designPage_body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -1515,7 +1568,6 @@ export default defineComponent({
|
|||||||
.designPage_left {
|
.designPage_left {
|
||||||
// width: 44.4rem;
|
// width: 44.4rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 2rem 0 0 0;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
position: relative;
|
position: relative;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
@@ -1589,7 +1641,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right_top {
|
.right_top {
|
||||||
padding: 2rem 3.2rem 2rem 1.2rem;
|
padding: 1rem 3.2rem 2rem 1.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
||||||
@@ -1656,62 +1708,7 @@ export default defineComponent({
|
|||||||
&.active{
|
&.active{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.right_content_header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 4.5rem;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 3.2rem 0 1.9rem;
|
|
||||||
background: rgba(255, 255, 255, 0.2);
|
|
||||||
position: relative;
|
|
||||||
.right_content_export{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
.icon-xiala{
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .3s all;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
.icon_rotate{
|
|
||||||
-moz-transform: rotate(180deg);
|
|
||||||
-webkit-transform: rotate(180deg);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
animation-direction: 0.5s;
|
|
||||||
}
|
|
||||||
.export_nav{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: absolute;
|
|
||||||
top: 5.5rem;
|
|
||||||
width: 100%;
|
|
||||||
background: #fff;
|
|
||||||
padding: 1rem;
|
|
||||||
border: 2px solid;
|
|
||||||
z-index: 2;
|
|
||||||
label{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.content_header_left {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon-dangqianweizhi {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_header_des {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
color: #000000;
|
|
||||||
margin-left: 1rem;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.right_content_body {
|
.right_content_body {
|
||||||
// padding: 0 1.8rem 0 1.2rem;
|
// padding: 0 1.8rem 0 1.2rem;
|
||||||
// height: calc(50% - 4.5rem);
|
// height: calc(50% - 4.5rem);
|
||||||
|
|||||||
@@ -169,9 +169,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="input_blok" v-show="brushProportion">
|
<div class="input_blok" v-show="brushProportion">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<div class="text">Stretch</div>
|
<div class="text">Resize</div>
|
||||||
|
<!-- 伸缩 -->
|
||||||
<a-slider class="slider" v-model:value="slider" :tooltipVisible="false" @change="sliderChange"/>
|
<a-slider class="slider" v-model:value="slider" :tooltipVisible="false" @change="sliderChange"/>
|
||||||
<div class="gallery_btn" @click="stretchOK">完成</div>
|
<!-- <div class="gallery_btn" @click="stretchOK">完成</div> -->
|
||||||
|
<div>
|
||||||
|
<i class="fi fi-sr-check-circle" style="display: flex; font-size: 4rem; cursor: pointer;" @click="stretchOK"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -843,7 +847,7 @@ export default defineComponent({
|
|||||||
}else{
|
}else{
|
||||||
cropper.getCropData(async (value:any) => {
|
cropper.getCropData(async (value:any) => {
|
||||||
// 转换为File对象
|
// 转换为File对象
|
||||||
if(this.printObject.templateId){
|
if(this.printObject.templateId || this.printObject.id){
|
||||||
this.printObject.id = this.printObject.relationId
|
this.printObject.id = this.printObject.relationId
|
||||||
this.confrimSubmit()
|
this.confrimSubmit()
|
||||||
}else{
|
}else{
|
||||||
@@ -853,6 +857,7 @@ export default defineComponent({
|
|||||||
this.customRequest().then((rv:any)=>{
|
this.customRequest().then((rv:any)=>{
|
||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
this.printObject.id = rv.id
|
this.printObject.id = rv.id
|
||||||
|
this.printObject.url = rv.url
|
||||||
this.confrimSubmit()
|
this.confrimSubmit()
|
||||||
}).catch((res:any)=>{
|
}).catch((res:any)=>{
|
||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
@@ -879,13 +884,13 @@ export default defineComponent({
|
|||||||
"type": this.printObject.designType,
|
"type": this.printObject.designType,
|
||||||
// "waistbandLeft": [],
|
// "waistbandLeft": [],
|
||||||
// "waistbandRight": []
|
// "waistbandRight": []
|
||||||
...await this.getPrintLocation()
|
|
||||||
}
|
}
|
||||||
this.isShowMark = true
|
this.isShowMark = true
|
||||||
Https.axiosPost(Https.httpUrls.modifyProportion, data).then(
|
Https.axiosPost(Https.httpUrls.modifyProportion, data).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
// this.getImgDetail(url)
|
// this.getImgDetail(url)
|
||||||
this.printObject.rv
|
this.printObject.url = rv
|
||||||
|
this.option.img = rv
|
||||||
this.setProportion(false)
|
this.setProportion(false)
|
||||||
this.isShowMark = false
|
this.isShowMark = false
|
||||||
}
|
}
|
||||||
@@ -920,6 +925,30 @@ export default defineComponent({
|
|||||||
cropper.changeScale(num);
|
cropper.changeScale(num);
|
||||||
},
|
},
|
||||||
async confrimSubmit(){
|
async confrimSubmit(){
|
||||||
|
console.log(this.printObject)
|
||||||
|
let isCovered = true
|
||||||
|
if(this.editOrUpload == 'edit'){
|
||||||
|
await new Promise((resolve, reject) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: this.t('LibraryPage.jsContent10'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Save as new',
|
||||||
|
cancelText: 'Overwrite',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
isCovered = false
|
||||||
|
resolve('')
|
||||||
|
},
|
||||||
|
onCancel(){
|
||||||
|
isCovered = true
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
let modelType = 'Library'
|
let modelType = 'Library'
|
||||||
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
|
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
|
||||||
modelType = this.modelType
|
modelType = this.modelType
|
||||||
@@ -930,6 +959,8 @@ export default defineComponent({
|
|||||||
modelType:modelType,
|
modelType:modelType,
|
||||||
modelSex:this.sex,
|
modelSex:this.sex,
|
||||||
checkMd5:1,
|
checkMd5:1,
|
||||||
|
modelPath:getMinioUrl(this.printObject.url),
|
||||||
|
isCovered,
|
||||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
...await this.getPrintLocation()
|
...await this.getPrintLocation()
|
||||||
}
|
}
|
||||||
@@ -1080,6 +1111,7 @@ export default defineComponent({
|
|||||||
async setProportion(boolean:any){
|
async setProportion(boolean:any){
|
||||||
this.brushProportion = boolean
|
this.brushProportion = boolean
|
||||||
if(boolean){
|
if(boolean){
|
||||||
|
this.slider = 50
|
||||||
let url
|
let url
|
||||||
if(this.printObject.url){
|
if(this.printObject.url){
|
||||||
url = this.printObject.url
|
url = this.printObject.url
|
||||||
|
|||||||
@@ -5,8 +5,8 @@
|
|||||||
<!-- <div class="text">Style:</div>
|
<!-- <div class="text">Style:</div>
|
||||||
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
|
<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
|
||||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
|
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
|
||||||
<div class="text">Style:</div>
|
<div class="text" v-show="systemUser">Style:</div>
|
||||||
<div class="generalModel_state" style="width: 20rem;">
|
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
|
||||||
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
|
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="selectObject.style"
|
v-model:value="selectObject.style"
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
|
||||||
<a-switch class="switch" :disabled="libraryList?.[0]==null?true:false" :checked="!systemUser" @click="setSystemUser" />
|
<a-switch class="switch" :checked="!systemUser" @click="setSystemUser" />
|
||||||
<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
|
<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
<img :src="item.presignedUrl" alt="">
|
<img :src="item.presignedUrl" alt="">
|
||||||
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
|
<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
|
||||||
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
|
<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
|
||||||
<span class="icon add" v-if="systemUser" :title="'Add to your library'">+</span>
|
<span class="icon add" v-if="systemUser" :title="'Add to your library'" @click.stop="addSystemToUser(item)">+</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="uploadBox">
|
<div class="uploadBox">
|
||||||
<div class="upload" v-if="!systemUser">
|
<div class="upload" v-if="!systemUser">
|
||||||
@@ -69,6 +69,7 @@ import { useI18n } from 'vue-i18n'
|
|||||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
||||||
import edit from './edit.vue';
|
import edit from './edit.vue';
|
||||||
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||||
|
import { Item } from 'ant-design-vue/lib/menu';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
habitSetStyle,edit
|
habitSetStyle,edit
|
||||||
@@ -84,14 +85,14 @@ export default defineComponent({
|
|||||||
modelList:[],
|
modelList:[],
|
||||||
systemUser:true,
|
systemUser:true,
|
||||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||||
mannequinStyleList:[],
|
mannequinStyleList:[] as any,
|
||||||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
||||||
})
|
})
|
||||||
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
||||||
if(newValue != oldValue){
|
if(newValue != oldValue){
|
||||||
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
||||||
data.mannequinStyleList.unshift({
|
data.mannequinStyleList.unshift({
|
||||||
name:'No style',
|
name:'All',
|
||||||
value:'',
|
value:'',
|
||||||
id:'',
|
id:'',
|
||||||
})
|
})
|
||||||
@@ -210,42 +211,30 @@ export default defineComponent({
|
|||||||
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
getModel()
|
getModel()
|
||||||
// let id = this.store.state.Workspace.workspace.id
|
|
||||||
// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
|
|
||||||
// if (rv) {
|
|
||||||
// if(rv.sexEnum.name == 'Female'){
|
|
||||||
// rv.mannequinUrl = rv.femalePresignedUrl
|
|
||||||
// rv.mannequinType = rv.mannequinFemaleType
|
|
||||||
// rv.mannequinId = rv.mannequinFemaleId
|
|
||||||
// }else if(rv.sexEnum.name == 'Male'){
|
|
||||||
// rv.mannequinUrl = rv.malePresignedUrl
|
|
||||||
// rv.mannequinType = rv.mannequinMaleType
|
|
||||||
// rv.mannequinId = rv.mannequinMaleId
|
|
||||||
// }
|
|
||||||
// this.store.commit("setWorkspace", rv);
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
}
|
}
|
||||||
).catch((res)=>{
|
).catch((res)=>{
|
||||||
// if(res.errCode === 2){
|
|
||||||
// Modal.confirm({
|
|
||||||
// title: res.errMsg,
|
|
||||||
// icon: createVNode(ExclamationCircleOutlined),
|
|
||||||
// okText: 'Yes',
|
|
||||||
// cancelText: 'No',
|
|
||||||
// mask:false,
|
|
||||||
// zIndex:99999,
|
|
||||||
// centered:true,
|
|
||||||
// onOk () {
|
|
||||||
// newData.deleteModelConfirm = 1
|
|
||||||
// confirmDeletePic('',index,newData)
|
|
||||||
// },
|
|
||||||
// onCancel(){
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
const addSystemToUser = (item:any)=>{
|
||||||
|
let newData = {
|
||||||
|
sysModelId:item.id,
|
||||||
|
}
|
||||||
|
Https.axiosGet(Https.httpUrls.addSysModelToLib, {params:newData}).then(
|
||||||
|
(rv: any) => {
|
||||||
|
getModel()
|
||||||
|
let value = {
|
||||||
|
id:rv.id,
|
||||||
|
url:rv.url,
|
||||||
|
type:'Library',
|
||||||
|
}
|
||||||
|
setSelectKey(value)
|
||||||
|
data.systemUser = false
|
||||||
|
}
|
||||||
|
).catch((res)=>{
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
getModel()
|
getModel()
|
||||||
})
|
})
|
||||||
@@ -262,7 +251,8 @@ export default defineComponent({
|
|||||||
beforeUpload,
|
beforeUpload,
|
||||||
fileUploadChange,
|
fileUploadChange,
|
||||||
getModel,
|
getModel,
|
||||||
deleteSinglePic
|
deleteSinglePic,
|
||||||
|
addSystemToUser
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
@@ -334,6 +324,7 @@ export default defineComponent({
|
|||||||
> .item{
|
> .item{
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
height: 55rem;
|
height: 55rem;
|
||||||
|
max-height: 100%;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -390,8 +381,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .uploadBox{
|
> .uploadBox{
|
||||||
padding-left: 2rem;
|
padding: 0 2rem;
|
||||||
right: .5rem;
|
right: 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="threeDownPage" ref="threeDownPage">
|
<div class="threeDownPage" ref="threeDownPage">
|
||||||
|
<!-- height="65rem" -->
|
||||||
<a-modal class="generalModel"
|
<a-modal class="generalModel"
|
||||||
v-model:visible="threeDown"
|
v-model:visible="threeDown"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
width="77rem"
|
width="77rem"
|
||||||
height="65rem"
|
height="35rem"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:mask="false"
|
:mask="true"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
:get-container="() => $refs.threeDownPage"
|
:get-container="() => $refs.threeDownPage"
|
||||||
@@ -24,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||||
<div class="modal_title_text" style="text-align: center;">
|
<div class="modal_title_text" style="text-align: center;">
|
||||||
<div>Please select the image size</div>
|
<div>Please select the size of the clothing</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="downItem" v-for="item,key in loadList">
|
<div class="downItem" v-for="item,key in loadList">
|
||||||
@@ -37,7 +38,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 100%; display: flex; margin-top: auto;">
|
<div style="width: 100%; display: flex; margin-top: auto;">
|
||||||
<div class="gallery_btn" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
|
<div class="gallery_btn" :class="{btnActive:!select.sizeType}" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -84,6 +85,8 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
const cancelDsign = ()=>{
|
const cancelDsign = ()=>{
|
||||||
data.threeDown = false;
|
data.threeDown = false;
|
||||||
|
data.select.sizeType = ''
|
||||||
|
data.select.size = ''
|
||||||
}
|
}
|
||||||
const getDowList = (id:any)=>{
|
const getDowList = (id:any)=>{
|
||||||
data.isShowMark = true
|
data.isShowMark = true
|
||||||
@@ -104,11 +107,13 @@ export default defineComponent({
|
|||||||
let value = {
|
let value = {
|
||||||
...data.select,
|
...data.select,
|
||||||
}
|
}
|
||||||
Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
|
let config = {
|
||||||
console.log(res)
|
params:value
|
||||||
//anchor 标签下载
|
}
|
||||||
|
|
||||||
|
Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
|
||||||
let a = document.createElement('a');
|
let a = document.createElement('a');
|
||||||
a.href = res.url;
|
a.href = res;
|
||||||
a.download = 'model.zip'; // 设置下载的文件名
|
a.download = 'model.zip'; // 设置下载的文件名
|
||||||
a.click(); // 触发下载
|
a.click(); // 触发下载
|
||||||
URL.revokeObjectURL(a.href); // 释放 URL 对象
|
URL.revokeObjectURL(a.href); // 释放 URL 对象
|
||||||
@@ -126,6 +131,7 @@ export default defineComponent({
|
|||||||
data.select.sizeType = key
|
data.select.sizeType = key
|
||||||
data.select.size = DSizeItem
|
data.select.size = DSizeItem
|
||||||
}
|
}
|
||||||
|
|
||||||
return{
|
return{
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
@@ -142,21 +148,36 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
:deep(.ant-modal-mask){
|
||||||
|
background: rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
.threeDownPage{
|
.threeDownPage{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
:deep(.generalModel){
|
:deep(.generalModel){
|
||||||
|
.gallery_btn{
|
||||||
|
&.btnActive{
|
||||||
|
pointer-events: none;
|
||||||
|
background: rgba(0, 0, 0, .4);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
.content{
|
.content{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding-left: 6rem;
|
||||||
|
// width: 55rem;
|
||||||
|
// margin: 0 auto;
|
||||||
|
|
||||||
> .downItem{
|
> .downItem{
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
align-items:center;
|
||||||
> .title{
|
> .title{
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
width: 3.5rem;
|
width: 3.5rem;
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div class="patternMaking3D">
|
<div class="patternMaking3D">
|
||||||
<div class="selectModel">
|
<div class="selectModel">
|
||||||
<div class="heard">Clothing</div>
|
<div class="heard">Clothing</div>
|
||||||
<div class="list">
|
<div class="list" v-if="maskShow">
|
||||||
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
|
||||||
<img :src="item.url" alt="">
|
<img :src="item.url" alt="">
|
||||||
</div>
|
</div>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
||||||
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
||||||
</div>
|
</div>
|
||||||
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
|
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>
|
||||||
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>
|
||||||
@@ -76,6 +76,7 @@ export default defineComponent({
|
|||||||
pageSize:10,
|
pageSize:10,
|
||||||
imgOrThree:false,
|
imgOrThree:false,
|
||||||
isFront:false,
|
isFront:false,
|
||||||
|
maskShow:false,
|
||||||
})
|
})
|
||||||
const setSelectModel = (item:any)=>{
|
const setSelectModel = (item:any)=>{
|
||||||
data.isShowMark = true
|
data.isShowMark = true
|
||||||
@@ -104,6 +105,9 @@ export default defineComponent({
|
|||||||
let id = store.state.HomeStoreModule.patternMaking3D
|
let id = store.state.HomeStoreModule.patternMaking3D
|
||||||
if(id && data.selectModel.id == -1)setSelectModel({id})
|
if(id && data.selectModel.id == -1)setSelectModel({id})
|
||||||
})
|
})
|
||||||
|
setTimeout(()=>{
|
||||||
|
data.maskShow = true
|
||||||
|
},500)
|
||||||
}
|
}
|
||||||
const getModelList = ()=>{
|
const getModelList = ()=>{
|
||||||
if(data.isShowMark && !data.isNoData)return
|
if(data.isShowMark && !data.isNoData)return
|
||||||
@@ -219,6 +223,7 @@ export default defineComponent({
|
|||||||
width: calc(100% / 4 - 1rem);
|
width: calc(100% / 4 - 1rem);
|
||||||
margin: .5rem;
|
margin: .5rem;
|
||||||
aspect-ratio: 1 / 1.2;
|
aspect-ratio: 1 / 1.2;
|
||||||
|
// height: 10rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
border: 2px solid #D4D4D4;
|
border: 2px solid #D4D4D4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -125,10 +125,10 @@ export default defineComponent({
|
|||||||
floorMesh.rotation.x = -0.5 * Math.PI;
|
floorMesh.rotation.x = -0.5 * Math.PI;
|
||||||
floorMesh.receiveShadow = true;
|
floorMesh.receiveShadow = true;
|
||||||
floorMesh.position.y = -0.001;
|
floorMesh.position.y = -0.001;
|
||||||
data.scene.add(floorMesh);
|
// data.scene.add(floorMesh);
|
||||||
const textureLoader = new THREE.TextureLoader();
|
const textureLoader = new THREE.TextureLoader();
|
||||||
// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
|
// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
|
||||||
data.scene.background = new THREE.Color("#eee");
|
data.scene.background = new THREE.Color("#fff");
|
||||||
// data.scene.background = texture;
|
// data.scene.background = texture;
|
||||||
|
|
||||||
let openModel = (event:any)=>{
|
let openModel = (event:any)=>{
|
||||||
@@ -213,7 +213,7 @@ export default defineComponent({
|
|||||||
//添加图片材质
|
//添加图片材质
|
||||||
data.load.state = true
|
data.load.state = true
|
||||||
let textureLoader = new THREE.TextureLoader()
|
let textureLoader = new THREE.TextureLoader()
|
||||||
textureLoader.load('/3dModel/texture0.webp', // 图片放在public/textures目录下
|
textureLoader.load('https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%99%BD%E8%89%B2%E5%9B%BE%E7%89%87&hs=0&pn=8&spn=0&di=7466852183703552001&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1061489690%2C1376605706&os=2709213815%2C2487532130&simid=3551480199%2C346831275&adpicid=0&lpn=0&ln=0&fm=&sme=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F941fd00fgy1hrx01tvys1j20zk1bet8s.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fojtk5_z%26e3Bv54AzdH3Fd9bc88db90AzdH3FO5LdNyykj&gsm=&islist=&querylist=', // 图片放在public/textures目录下
|
||||||
(texture:any) => {
|
(texture:any) => {
|
||||||
// 3. 配置纹理参数
|
// 3. 配置纹理参数
|
||||||
texture.wrapS = THREE.RepeatWrapping;
|
texture.wrapS = THREE.RepeatWrapping;
|
||||||
@@ -226,7 +226,7 @@ export default defineComponent({
|
|||||||
const newMaterial = new THREE.MeshStandardMaterial({
|
const newMaterial = new THREE.MeshStandardMaterial({
|
||||||
map: texture, // 基础颜色贴图
|
map: texture, // 基础颜色贴图
|
||||||
roughness: 0.7, // 表面粗糙度 (0-1)
|
roughness: 0.7, // 表面粗糙度 (0-1)
|
||||||
metalness: 0.2, // 金属质感 (0-1)
|
metalness: .2, // 金属质感 (0-1)
|
||||||
side: THREE.DoubleSide // 双面渲染
|
side: THREE.DoubleSide // 双面渲染
|
||||||
});
|
});
|
||||||
console.log(child)
|
console.log(child)
|
||||||
|
|||||||
@@ -2,19 +2,21 @@
|
|||||||
<div class="poseTransfer">
|
<div class="poseTransfer">
|
||||||
<div class="configuratioBox" :class="{active:button.left}">
|
<div class="configuratioBox" :class="{active:button.left}">
|
||||||
<div class="configuratio">
|
<div class="configuratio">
|
||||||
<div class="title">Give pose for them to select</div>
|
<!-- <div class="title">Give pose for them to select</div> -->
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
||||||
<div class="selectImg">
|
<div class="selectImg">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="text">Current</div>
|
<div class="text">Choose design to transfer</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgBox">
|
<div class="imgBox" v-mousewheel>
|
||||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
|
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
|
||||||
<img :src="item.imgUrl || item.url" alt="">
|
<img :src="item.imgUrl || item.url" alt="">
|
||||||
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
|
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
|
||||||
<img :src="item.imgUrl || item.url" alt="">
|
<img :src="item.imgUrl || item.url" alt="">
|
||||||
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<div class="upload_item item">
|
<div class="upload_item item">
|
||||||
<div class="upload_file_item">
|
<div class="upload_file_item">
|
||||||
@@ -46,45 +48,50 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="poses">
|
<div class="poses">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="text">Target poses</div>
|
<div class="text">Choose pose</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgBox">
|
<div class="imgBox" v-mousewheel>
|
||||||
<div class="item" v-for="item in currentList">
|
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||||
<img :src="item.imgUrl" alt="">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="generate">
|
<div class="generate input_border">
|
||||||
<div class="gallery_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>
|
||||||
<div v-show="isGenerate && !remGenerate" class="gallery_btn">
|
<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn">
|
||||||
<i class="fi fi-br-loading"></i>
|
<i class="fi fi-br-loading"></i>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
|
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||||
{{$t('Generate.Close')}}
|
{{$t('Generate.Close')}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="likeBox">
|
<div class="likeBox">
|
||||||
<div class="element">
|
<div class="element">
|
||||||
<div class="title">Selected Product</div>
|
<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
|
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
|
||||||
</div>
|
</div>
|
||||||
<div class="btnLeft" @click="setSize('left')">
|
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
|
||||||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
<span class="icon iconfont icon-xiala"></span>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="btnRight" @click="setSize('right')">
|
<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
|
||||||
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
<span class="icon iconfont icon-xiala"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="noLikeBox" :class="{active:button.right}">
|
<div class="noLikeBox" :class="{active:button.right}">
|
||||||
<div class="element">
|
<div class="element">
|
||||||
<div class="title">Generate Product</div>
|
<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
|
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
|
||||||
</div>
|
</div>
|
||||||
@@ -134,10 +141,13 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
waitList:[],
|
waitList:[],
|
||||||
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
|
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
|
||||||
noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
|
noLikeList:[],
|
||||||
isGenerate:false,//判断是否正在进行generate
|
isGenerate:false,//判断是否正在进行generate
|
||||||
remGenerate:false,
|
remGenerate:false,
|
||||||
removeGenerate:false,
|
removeGenerate:false,
|
||||||
|
generateTime:null as any,
|
||||||
|
poseList:[],
|
||||||
|
selectPose:null as any,
|
||||||
})
|
})
|
||||||
const setIsShowMark:any = inject('setIsShowMark')
|
const setIsShowMark:any = inject('setIsShowMark')
|
||||||
const dataDom = reactive({
|
const dataDom = reactive({
|
||||||
@@ -145,14 +155,33 @@ export default defineComponent({
|
|||||||
generalDragRight:null as any,
|
generalDragRight:null as any,
|
||||||
scaleVideo:null as any,
|
scaleVideo:null as any,
|
||||||
})
|
})
|
||||||
const selectImgItem = (item:any)=>{
|
const selectImgItem = (item:any,)=>{
|
||||||
data.selectImg = item
|
data.selectImg = item
|
||||||
data.selectImg.minioUrl = getMinioUrl(item.url)
|
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||||
|
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||||
|
item.isChecked = true
|
||||||
|
if(item.url || item.imgUrl)data.selectImg.minioUrl = getMinioUrl(item.url || item.imgUrl)
|
||||||
}
|
}
|
||||||
const openSetData = ()=>{
|
const openSetData = ()=>{
|
||||||
// dataDom.generalDrag.openSetData()
|
// dataDom.generalDrag.openSetData()
|
||||||
data.currentList = store.state.UploadFilesModule.modularData.toProduct
|
data.currentList = store.state.UploadFilesModule.modularData.toProduct
|
||||||
setIsShowMark(false)
|
setIsShowMark(false)
|
||||||
|
if(data.poseList.length == 0){
|
||||||
|
getPoseList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const gifPlay = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.gif//使用gif图片
|
||||||
|
}
|
||||||
|
const gifPause = (e:any,item:any)=>{
|
||||||
|
e.target.src = item.firstFrame//静态图片
|
||||||
|
}
|
||||||
|
const getPoseList = ()=>{
|
||||||
|
Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
|
||||||
|
rv[0].isChecked = true
|
||||||
|
data.selectPose = rv[0]?.id || 1
|
||||||
|
data.poseList = rv
|
||||||
|
})
|
||||||
}
|
}
|
||||||
const setSize = (str:any)=>{
|
const setSize = (str:any)=>{
|
||||||
data.button[str] = !data.button[str]
|
data.button[str] = !data.button[str]
|
||||||
@@ -173,7 +202,7 @@ export default defineComponent({
|
|||||||
data.remGenerate = true
|
data.remGenerate = true
|
||||||
},10000)
|
},10000)
|
||||||
let value = {
|
let value = {
|
||||||
poseId:1,
|
poseId:data.selectPose,
|
||||||
projectId:store.state.Workspace.probjects.id,
|
projectId:store.state.Workspace.probjects.id,
|
||||||
productImage:data.selectImg.minioUrl,
|
productImage:data.selectImg.minioUrl,
|
||||||
}
|
}
|
||||||
@@ -187,11 +216,11 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const setGenerate = (dataList:any)=>{
|
const setGenerate = (dataList:any)=>{
|
||||||
let list = dataList
|
let list:any = dataList
|
||||||
let dataNum = dataList.length
|
let dataNum = dataList.length
|
||||||
let state = true
|
let state = true
|
||||||
data.generateTime = setInterval(()=>{
|
data.generateTime = setInterval(()=>{
|
||||||
if(!data.isGenerate || data.remGenerate)return
|
if(!data.isGenerate || !data.remGenerate)return
|
||||||
if(!state)return
|
if(!state)return
|
||||||
state = false
|
state = false
|
||||||
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
|
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
|
||||||
@@ -205,11 +234,15 @@ export default defineComponent({
|
|||||||
element.url = element.firstFrameUrl
|
element.url = element.firstFrameUrl
|
||||||
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
|
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
|
||||||
data.noLikeList[index] = element
|
data.noLikeList[index] = element
|
||||||
list = list.filter((item:any) => item !== element.taskId);
|
console.log(list)
|
||||||
|
list = ''
|
||||||
|
// if(list?.filter)list = list?.filter((item:any) => item !== element.taskId);
|
||||||
|
}else if(element.status == 'Fail'){
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
data.waitList = list
|
data.waitList = list
|
||||||
if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
|
if((!list)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
|
||||||
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
|
||||||
message.info(t('Generate.effectPoor'));
|
message.info(t('Generate.effectPoor'));
|
||||||
}else{
|
}else{
|
||||||
@@ -224,6 +257,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
).catch(res=>{
|
).catch(res=>{
|
||||||
|
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
|
||||||
clearInterval(data.generateTime)
|
clearInterval(data.generateTime)
|
||||||
clearInterval(data.remGenerateTime)
|
clearInterval(data.remGenerateTime)
|
||||||
data.isGenerate = false
|
data.isGenerate = false
|
||||||
@@ -276,6 +310,8 @@ export default defineComponent({
|
|||||||
if(res.errCode == 0){
|
if(res.errCode == 0){
|
||||||
file.imgUrl = res.data.url;
|
file.imgUrl = res.data.url;
|
||||||
file.id = res.data.id
|
file.id = res.data.id
|
||||||
|
data.fileList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||||
|
data.currentList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||||
file.isChecked = true
|
file.isChecked = true
|
||||||
file.type = 'ProductElement'
|
file.type = 'ProductElement'
|
||||||
// if(props.productimgMenu.value == 'Relight'){
|
// if(props.productimgMenu.value == 'Relight'){
|
||||||
@@ -308,6 +344,7 @@ export default defineComponent({
|
|||||||
if(item.id == id){
|
if(item.id == id){
|
||||||
if(str == 'zoom'){
|
if(str == 'zoom'){
|
||||||
showViewVideo({url:item.videoUrl})
|
showViewVideo({url:item.videoUrl})
|
||||||
|
|
||||||
}else if(str == 'like'){
|
}else if(str == 'like'){
|
||||||
likeFile(item,'like',index)
|
likeFile(item,'like',index)
|
||||||
}
|
}
|
||||||
@@ -353,8 +390,13 @@ export default defineComponent({
|
|||||||
).catch(res=>{
|
).catch(res=>{
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
const selectPose = (item:any)=>{
|
||||||
|
item.isChecked = true
|
||||||
|
data.selectPose = item?.id || 1
|
||||||
|
data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||||
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
|
||||||
})
|
})
|
||||||
return{
|
return{
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
@@ -363,6 +405,8 @@ export default defineComponent({
|
|||||||
selectImgItem,
|
selectImgItem,
|
||||||
setSize,
|
setSize,
|
||||||
setItemPosition,
|
setItemPosition,
|
||||||
|
gifPlay,
|
||||||
|
gifPause,
|
||||||
getgenerate,
|
getgenerate,
|
||||||
getUploadUrl,
|
getUploadUrl,
|
||||||
beforeUpload,
|
beforeUpload,
|
||||||
@@ -370,8 +414,24 @@ export default defineComponent({
|
|||||||
removeGenerate,
|
removeGenerate,
|
||||||
likeSetBtn,
|
likeSetBtn,
|
||||||
noLikeSetBtn,
|
noLikeSetBtn,
|
||||||
|
selectPose,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
directives:{
|
||||||
|
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 })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
provide() {
|
provide() {
|
||||||
return {
|
return {
|
||||||
}
|
}
|
||||||
@@ -390,22 +450,27 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding-right: 3.8rem;
|
||||||
&.active{
|
&.active{
|
||||||
width: 0;
|
width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
> .generate{
|
> .generate{
|
||||||
margin-top: auto;
|
margin-left: auto;
|
||||||
|
> .started_btn{
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .configuratioBox > .configuratio{
|
> .configuratioBox > .configuratio{
|
||||||
padding-right: 3.8rem;
|
|
||||||
width: 31.8rem;
|
width: 31.8rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
> .title{
|
> .title{
|
||||||
// font-size: 2.6rem;
|
// font-size: 2.6rem;
|
||||||
}
|
}
|
||||||
> .content{
|
> .content{
|
||||||
margin-top: 4rem;
|
// margin-top: 4rem;
|
||||||
|
margin-top: 1.8rem;
|
||||||
> .selectImg,> .poses{
|
> .selectImg,> .poses{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -414,24 +479,29 @@ export default defineComponent({
|
|||||||
max-height: 45rem;
|
max-height: 45rem;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
overflow-y: auto;
|
overflow-x: auto;
|
||||||
> .item{
|
> .item{
|
||||||
|
margin-right: 1rem;
|
||||||
width: calc(100% / 2 - .5rem);
|
width: calc(100% / 2 - .5rem);
|
||||||
margin-bottom: 1rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 2rem;
|
|
||||||
border: 2px solid #8e8e8e;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 25rem;
|
height: 25rem;
|
||||||
&.active{
|
position: relative;
|
||||||
border: 2px solid;
|
// &.active{
|
||||||
|
// border: 2px solid;
|
||||||
|
// }
|
||||||
|
:deep(.ant-checkbox-wrapper){
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
}
|
}
|
||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -447,29 +517,11 @@ export default defineComponent({
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
> .text{
|
> .text{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .selectImg{
|
|
||||||
> .head{
|
|
||||||
> .text{
|
|
||||||
position: relative;
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background: #000;
|
|
||||||
height: calc(.4rem*1.2);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
bottom: -.5rem;
|
|
||||||
width: 0px;
|
|
||||||
width: 100%;
|
|
||||||
transition: 0.3s all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
> .poses{
|
> .poses{
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
@@ -504,8 +556,12 @@ export default defineComponent({
|
|||||||
>span{
|
>span{
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
&.active{
|
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
>span{
|
||||||
transform: rotate(270deg);
|
transform: rotate(270deg);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -521,6 +577,11 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> .title{
|
> .title{
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 900;
|
||||||
|
> span{
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -10,62 +10,8 @@
|
|||||||
<!-- <div class="productImg_content_item_title productImg_content_item_title_menu">
|
<!-- <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>
|
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="input_border productImg_content_item_generate">
|
|
||||||
<div class="input_box">
|
|
||||||
<div class="input_box_btnBox">
|
|
||||||
<input
|
|
||||||
class="search_input"
|
|
||||||
:placeholder="$t('Generate.inputContent1')"
|
|
||||||
v-model="searchName[productimgMenu.value]"
|
|
||||||
@keydown.enter="getPrductimg()"
|
|
||||||
/>
|
|
||||||
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="()=>isTextarea = !isTextarea"></i>
|
|
||||||
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="()=>isTextarea = !isTextarea"></i>
|
|
||||||
</div>
|
|
||||||
<textarea
|
|
||||||
v-show="isTextarea"
|
|
||||||
class="search_textarea "
|
|
||||||
@keydown.enter="getPrductimg()"
|
|
||||||
v-model="searchName[productimgMenu.value]"
|
|
||||||
></textarea>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<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="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
||||||
<div class="productImg_content_item_imgBox generalScroll upload_item">
|
<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
|
||||||
<div class="content_item_imgBox_itemImg" v-for="item,index in selectList[productimgMenu.value]" :key="item.id" >
|
<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':'']">
|
<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>
|
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||||
@@ -117,6 +63,59 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
|
<!-- <div class="productImg_content_item_title">{{$t('ProductImg.Upload')}}</div>
|
||||||
<div class="productImg_content_item_imgBox generalScroll upload_item">
|
<div class="productImg_content_item_imgBox generalScroll upload_item">
|
||||||
|
|
||||||
@@ -142,7 +141,7 @@
|
|||||||
<div class="productImg_right_item_box generalScroll">
|
<div class="productImg_right_item_box generalScroll">
|
||||||
<div class="content_header_left">
|
<div class="content_header_left">
|
||||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||||
{{ $t('HomeView.SelectedDesign') }}
|
{{ $t('ProductImg.SelectedDesign') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
|
<!-- <div class="productImg_right_item" v-for="item,index in generateList" :key="item"> -->
|
||||||
@@ -173,12 +172,10 @@
|
|||||||
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
|
<generalDrag ref="generalDragLeft" @setBtn="selectSetBtn" :list="likeList[productimgMenu.value]"></generalDrag>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
|
||||||
<a-spin size="large" />
|
<!-- <div class="btnLeft" @click="setSize('left')">
|
||||||
</div>
|
|
||||||
<div class="btnLeft" @click="setSize('left')">
|
|
||||||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="btnRight" @click="setSize('right')">
|
<div class="btnRight" @click="setSize('right')">
|
||||||
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
||||||
</div>
|
</div>
|
||||||
@@ -188,12 +185,15 @@
|
|||||||
<div class="productImg_right_item_box right generalScroll">
|
<div class="productImg_right_item_box right generalScroll">
|
||||||
<div class="content_header_left">
|
<div class="content_header_left">
|
||||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||||
{{ $t('HomeView.GeneratedDesign') }}
|
{{ $t('ProductImg.productImageDrafts') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
|
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="mark_loading" v-show="isShowMark">
|
||||||
|
<a-spin size="large" />
|
||||||
|
</div> -->
|
||||||
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
|
<!-- <div class="productImg_right_item" v-for="item,index in likeList[productimgMenu.value]" :key="item" >
|
||||||
<img :src="item.url" alt="">
|
<img :src="item.url" alt="">
|
||||||
<div class="productImg_right_item_iconRight">
|
<div class="productImg_right_item_iconRight">
|
||||||
@@ -272,7 +272,6 @@ export default defineComponent({
|
|||||||
ToProductImage:'',
|
ToProductImage:'',
|
||||||
Relight:'',
|
Relight:'',
|
||||||
},
|
},
|
||||||
isTextarea:false,//是否展开
|
|
||||||
remProductimg:false,//是否出现取消按钮
|
remProductimg:false,//是否出现取消按钮
|
||||||
isProductimg:false,//开始生成
|
isProductimg:false,//开始生成
|
||||||
selectProductimgList:[],
|
selectProductimgList:[],
|
||||||
@@ -329,7 +328,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
let userlikeGroupId = 0
|
let userlikeGroupId = 0
|
||||||
const openSetData = ()=>{
|
const openSetData = ()=>{
|
||||||
cleardata()
|
// cleardata()
|
||||||
if(props.productimgMenu.value == 'ToProductImage'){
|
if(props.productimgMenu.value == 'ToProductImage'){
|
||||||
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
|
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
|
||||||
}else if(props.productimgMenu.value == 'Relight'){
|
}else if(props.productimgMenu.value == 'Relight'){
|
||||||
@@ -340,6 +339,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
userlikeGroupId = selectDesignList.value.userlikeGroupId
|
userlikeGroupId = selectDesignList.value.userlikeGroupId
|
||||||
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
|
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
|
||||||
|
productImgDom.generalDragLeft.setItemPosition()
|
||||||
}
|
}
|
||||||
let setproduct = (value:any)=>{
|
let setproduct = (value:any)=>{
|
||||||
// props.productimgMenu = value
|
// props.productimgMenu = value
|
||||||
@@ -719,6 +719,18 @@ export default defineComponent({
|
|||||||
setItemPosition()
|
setItemPosition()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
upload,
|
upload,
|
||||||
driver__,
|
driver__,
|
||||||
@@ -749,10 +761,23 @@ export default defineComponent({
|
|||||||
generateSetBtn,
|
generateSetBtn,
|
||||||
setItemPosition,
|
setItemPosition,
|
||||||
setSize,
|
setSize,
|
||||||
|
ifMaximumLength,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
directives:{
|
directives:{
|
||||||
|
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 })
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -812,7 +837,7 @@ methods: {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_bottom{
|
.productImg_content_bottom{
|
||||||
height: calc(100% - 4rem - 2.4rem);
|
height: 100%;
|
||||||
--border-color: #c4c4c4;
|
--border-color: #c4c4c4;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -858,7 +883,8 @@ methods: {
|
|||||||
display: flex;
|
display: flex;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 14rem;
|
height: 36rem;
|
||||||
|
max-height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
img{
|
img{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -866,10 +892,8 @@ methods: {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
transform: scale(.9);
|
|
||||||
&.active{
|
&.active{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-checkbox-wrapper{
|
.ant-checkbox-wrapper{
|
||||||
@@ -918,7 +942,7 @@ methods: {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-right: 3.8rem;
|
padding-right: 3.8rem;
|
||||||
width: 31.8rem;
|
width: 39rem;
|
||||||
&.active{
|
&.active{
|
||||||
width: 0;
|
width: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -931,14 +955,17 @@ methods: {
|
|||||||
width: 9rem;
|
width: 9rem;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
&.upload_file_item:last-child{
|
&.upload_file_item:last-child{
|
||||||
|
width: 9rem;
|
||||||
margin-right: 0rem;
|
margin-right: 0rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// width: 45%;
|
// width: 45%;
|
||||||
.productImg_content_item_imgBox{
|
.productImg_content_item_imgBox{
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 3rem;
|
||||||
.content_item_imgBox_itemImg{
|
.content_item_imgBox_itemImg{
|
||||||
width: auto;
|
width: auto;
|
||||||
max-width: 9rem;
|
max-width: 20rem;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
img{
|
img{
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
@@ -946,16 +973,18 @@ methods: {
|
|||||||
}
|
}
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 9rem;
|
width: 36rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_generate{
|
.productImg_content_item_generate{
|
||||||
--width:100%;
|
--width:100%;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
|
// margin-top: auto;
|
||||||
}
|
}
|
||||||
.productImg_content_item_similarity{
|
.productImg_content_item_similarity{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding-bottom: 3rem;
|
||||||
.system_silder{
|
.system_silder{
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@@ -965,6 +994,7 @@ methods: {
|
|||||||
height: 5rem;
|
height: 5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_Direction{
|
.productImg_content_item_Direction{
|
||||||
@@ -986,7 +1016,6 @@ methods: {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_generate_btn{
|
.productImg_content_item_generate_btn{
|
||||||
margin-top: auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
.input_box{
|
.input_box{
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="contentBox">
|
<div class="contentBox" :class="{active:selectKey_ == 'design'}">
|
||||||
<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
|
<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
|
||||||
<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
|
<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
|
||||||
<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
|
<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
|
||||||
@@ -15,6 +15,7 @@ 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";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import workspace from '../../workflow/workspace.vue'
|
||||||
import seriesDesign from './seriesDesign.vue'
|
import seriesDesign from './seriesDesign.vue'
|
||||||
import printDesign from './printDesign.vue'
|
import printDesign from './printDesign.vue'
|
||||||
import singleProductDesign from './singleProductDesign.vue'
|
import singleProductDesign from './singleProductDesign.vue'
|
||||||
@@ -27,7 +28,7 @@ import { gsap, TweenMax } from "gsap";
|
|||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
|
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
|
||||||
},
|
},
|
||||||
props:{
|
props:{
|
||||||
selectKey_:String,
|
selectKey_:String,
|
||||||
@@ -89,6 +90,7 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const saveProject = (str:any)=>{
|
const saveProject = (str:any)=>{
|
||||||
|
if(str == 'design')return
|
||||||
let value:any = {
|
let value:any = {
|
||||||
projectId:data.selectObject.id,
|
projectId:data.selectObject.id,
|
||||||
}
|
}
|
||||||
@@ -97,7 +99,7 @@ export default defineComponent({
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
store.dispatch('getProjectData',str).then((data)=>{
|
store.dispatch('getProjectData',str).then((data)=>{
|
||||||
if(!data[str])return
|
// if(!data[str])return
|
||||||
value[str] = data[str]
|
value[str] = data[str]
|
||||||
|
|
||||||
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
||||||
@@ -205,10 +207,14 @@ export default defineComponent({
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
&.active{
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
> .contentBox{
|
> .contentBox{
|
||||||
position: relative;
|
position: relative;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow-x: initial;
|
||||||
> .content,
|
> .content,
|
||||||
>.homeContent{
|
>.homeContent{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -80,7 +80,7 @@ export default defineComponent({
|
|||||||
objectName:data.selectObject.type,
|
objectName:data.selectObject.type,
|
||||||
}
|
}
|
||||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||||
if(arr.indexOf(item) != -1){
|
if(arr.indexOf(item) > -1){
|
||||||
store.dispatch('setAllBoardData',value)
|
store.dispatch('setAllBoardData',value)
|
||||||
}else{
|
}else{
|
||||||
store.dispatch('setModularData',value)
|
store.dispatch('setModularData',value)
|
||||||
|
|||||||
@@ -102,11 +102,11 @@ export default defineComponent({
|
|||||||
const getCollection = ()=>{
|
const getCollection = ()=>{
|
||||||
let value:any = {
|
let value:any = {
|
||||||
"id":data.selectObject.id,
|
"id":data.selectObject.id,
|
||||||
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer']
|
"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer','mannequin']
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||||
historyChooseData(rv)//设置历史数据
|
historyChooseData(rv)//设置历史数据
|
||||||
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer']
|
let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer','mannequin']
|
||||||
let canvasData = ['canvas']
|
let canvasData = ['canvas']
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
for (let index = 0; index < canvasData.length; index++) {
|
||||||
const item = canvasData[index];
|
const item = canvasData[index];
|
||||||
@@ -188,9 +188,8 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
||||||
store.commit("setUserGroupId", data.design.userGroupId);
|
store.commit("setUserGroupId", data.design.userGroupId);
|
||||||
console.log(data.toProduct)
|
|
||||||
if(data.toProduct){
|
if(data.toProduct){
|
||||||
let value = {
|
let value = {
|
||||||
list: data.toProduct,
|
list: data.toProduct,
|
||||||
@@ -268,6 +267,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
return newData;
|
return newData;
|
||||||
});
|
});
|
||||||
|
console.log(colorList)
|
||||||
return colorList;
|
return colorList;
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
if(data.design.userLikeDetails)store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
|
||||||
store.commit("setUserGroupId", data.design.userGroupId);
|
store.commit("setUserGroupId", data.design.userGroupId);
|
||||||
if(data.toProduct){
|
if(data.toProduct){
|
||||||
let value = {
|
let value = {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="seriesDesign">
|
<div class="seriesDesign">
|
||||||
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
|
||||||
|
<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
|
||||||
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
|
||||||
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
|
<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
|
||||||
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
|
||||||
@@ -17,12 +18,13 @@ import { useI18n } from 'vue-i18n'
|
|||||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
||||||
import deReconstruction from '../../model/deReconstruction/index.vue'
|
import deReconstruction from '../../model/deReconstruction/index.vue'
|
||||||
import canvasUpload from "@/component/Canvas/index.vue";
|
import canvasUpload from "@/component/Canvas/index.vue";
|
||||||
|
import mannequin from '../../model/mannequin/index.vue'
|
||||||
|
|
||||||
import { gsap, TweenMax } from "gsap";
|
import { gsap, TweenMax } from "gsap";
|
||||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{
|
components:{
|
||||||
workspace,SketchboardUpload,deReconstruction,canvasUpload
|
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
|
||||||
},
|
},
|
||||||
props:{
|
props:{
|
||||||
selectKey_:{
|
selectKey_:{
|
||||||
@@ -46,6 +48,7 @@ export default defineComponent({
|
|||||||
sketchBoard:null as any,
|
sketchBoard:null as any,
|
||||||
deReconstruction:null as any,
|
deReconstruction:null as any,
|
||||||
canvas:null as any,
|
canvas:null as any,
|
||||||
|
mannequin:null as any,
|
||||||
})
|
})
|
||||||
const open = (str:any)=>{
|
const open = (str:any)=>{
|
||||||
nextTick(()=>{
|
nextTick(()=>{
|
||||||
@@ -71,11 +74,11 @@ export default defineComponent({
|
|||||||
const getCollection = ()=>{
|
const getCollection = ()=>{
|
||||||
let value:any = {
|
let value:any = {
|
||||||
"id":data.selectObject.id,
|
"id":data.selectObject.id,
|
||||||
"moduleList":["sketchBoard",'deReconstruction']
|
"moduleList":["sketchBoard",'deReconstruction','mannequin']
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||||
historyChooseData(rv)
|
historyChooseData(rv)
|
||||||
let allBoardData = ['sketchBoard','deReconstruction']
|
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
|
||||||
let canvasData = ['deReconstruction','canvas']
|
let canvasData = ['deReconstruction','canvas']
|
||||||
for (let index = 0; index < canvasData.length; index++) {
|
for (let index = 0; index < canvasData.length; index++) {
|
||||||
const item = canvasData[index];
|
const item = canvasData[index];
|
||||||
|
|||||||
@@ -1,32 +1,35 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
<div class="workflowBox">
|
||||||
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
||||||
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||||
<div class="homeContent" ref="parent">
|
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
||||||
<navListBox
|
<div class="homeContent" ref="parent">
|
||||||
@setSelectKey=setSelectKey
|
<navListBox
|
||||||
:navListData="navListData"
|
@setSelectKey=setSelectKey
|
||||||
:selectKey="selectKey"
|
:navListData="navListData"
|
||||||
:workflowType="workflowType"
|
:selectKey="selectKey"
|
||||||
v-model:isShowMark="isShowMark"
|
:workflowType="workflowType"
|
||||||
></navListBox>
|
v-model:isShowMark="isShowMark"
|
||||||
</div>
|
></navListBox>
|
||||||
<div class="content">
|
</div>
|
||||||
<div class="back">
|
<div class="content">
|
||||||
<div class="title">
|
<div class="back">
|
||||||
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
|
<div class="title">
|
||||||
</div>
|
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
|
||||||
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
|
{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
|
||||||
|
</div>
|
||||||
|
<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
|
||||||
|
</div>
|
||||||
|
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
|
||||||
</div>
|
</div>
|
||||||
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
|
||||||
<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
|
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
|
||||||
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
|
</div>
|
||||||
</div>
|
<div class="mark_loading" v-show="isShowMark">
|
||||||
<div class="mark_loading" v-show="isShowMark">
|
<a-spin size="large" />
|
||||||
<a-spin size="large" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -177,57 +180,69 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.workflow{
|
.workflowBox{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
> .contentBox{
|
> .workflow{
|
||||||
position: relative;
|
display: flex;
|
||||||
flex: 1;
|
width: 100%;
|
||||||
overflow: hidden;
|
height: 100%;
|
||||||
> .content,
|
> .contentBox{
|
||||||
>.homeContent{
|
position: relative;
|
||||||
width: 100%;
|
flex: 1;
|
||||||
height: 100%;
|
overflow: hidden;
|
||||||
padding: 4rem;
|
> .content,
|
||||||
padding-top: 3rem;
|
>.homeContent{
|
||||||
// padding: 3rem;
|
|
||||||
}
|
|
||||||
> .content{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transform: scale(0);
|
|
||||||
// background: #ff6666;
|
|
||||||
background: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> *{
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 4rem;
|
||||||
|
padding-top: 3rem;
|
||||||
|
// padding: 3rem;
|
||||||
}
|
}
|
||||||
> .back{
|
> .content{
|
||||||
width: auto;
|
position: absolute;
|
||||||
height: auto;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
// background: #ff6666;
|
||||||
|
background: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-bottom: 1rem;
|
flex-direction: column;
|
||||||
> .title{
|
> *{
|
||||||
font-size: 2rem;
|
width: 100%;
|
||||||
font-weight: 600;
|
height: 100%;
|
||||||
}
|
}
|
||||||
> .text{
|
> .back{
|
||||||
cursor: pointer;
|
width: auto;
|
||||||
margin-left: auto;
|
height: auto;
|
||||||
> i{
|
display: flex;
|
||||||
font-size: 3rem;
|
padding-bottom: 1rem;
|
||||||
|
> .title{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
> i{
|
||||||
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> .text{
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
> i{
|
||||||
|
font-size: 3rem;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
> .homeContent{
|
||||||
> .homeContent{
|
// background: #91ff66;
|
||||||
// background: #91ff66;
|
position: absolute;
|
||||||
position: absolute;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,8 @@
|
|||||||
<!-- @click.stop="setSelect(item)" -->
|
<!-- @click.stop="setSelect(item)" -->
|
||||||
<div class="background"></div>
|
<div class="background"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
|
<i :class="[item.icon,]" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
|
||||||
|
<!-- <i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }} -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
|
<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
|
||||||
</div>
|
</div>
|
||||||
@@ -117,7 +118,7 @@ export default defineComponent({
|
|||||||
&.printDesign{width: 8rem;height: 1.3rem;}
|
&.printDesign{width: 8rem;height: 1.3rem;}
|
||||||
&.printingDesign3D{width: 8rem;height: 1.3rem;}
|
&.printingDesign3D{width: 8rem;height: 1.3rem;}
|
||||||
&.productDrawingDesign{width: 38rem;height: 23rem;}
|
&.productDrawingDesign{width: 38rem;height: 23rem;}
|
||||||
&.sketchDesign{width: 38rem;height: 1.3rem;}
|
&.sketchDesign{width: 38rem;height: 23rem;}
|
||||||
}
|
}
|
||||||
> .navListItem{
|
> .navListItem{
|
||||||
width: 22rem;
|
width: 22rem;
|
||||||
@@ -131,6 +132,7 @@ export default defineComponent({
|
|||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
padding: 2rem;
|
||||||
&.seriesDesign{
|
&.seriesDesign{
|
||||||
&.item1-1{top: -5rem;left: -22rem;}
|
&.item1-1{top: -5rem;left: -22rem;}
|
||||||
&.item1-2{top: 9rem;left: -22rem;}
|
&.item1-2{top: 9rem;left: -22rem;}
|
||||||
@@ -165,9 +167,10 @@ export default defineComponent({
|
|||||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||||
}
|
}
|
||||||
&.sketchDesign{
|
&.sketchDesign{
|
||||||
&.item1-1{top: -2.5rem;left: -22rem;}
|
&.item1-1{top: -5rem;left: -22rem;}
|
||||||
&.item2-1{top: -2.5rem;left: 8rem;}
|
&.item1-2{top: 18rem;left: -22rem;}
|
||||||
&.item3-1{top: -2.5rem;left: 38rem;}
|
&.item2-1{top: 6.5rem;left: 8rem;}
|
||||||
|
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||||
}
|
}
|
||||||
.background{
|
.background{
|
||||||
// background: #e8e8e8;
|
// background: #e8e8e8;
|
||||||
@@ -200,7 +203,7 @@ export default defineComponent({
|
|||||||
bottom: 1rem;
|
bottom: 1rem;
|
||||||
right: 1rem;
|
right: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: #000 0px 0px 10px;
|
box-shadow: #000 0px 0px 2px;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
> i{
|
> i{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="style marginBottom" v-if="show.style">
|
<div class="style marginBottom" v-if="show.style">
|
||||||
<div class="text">Style:</div>
|
<div class="text">Style:</div>
|
||||||
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'No style' }}</div>
|
<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
|
||||||
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="position marginBottom" v-show="show.position">
|
<div class="position marginBottom" v-show="show.position">
|
||||||
<generalMenu :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
<generalMenu :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
|
||||||
</div>
|
</div>
|
||||||
<div class="complete">
|
<div class="complete">
|
||||||
<div class="gallery_btn" @click="complete">Complete</div>
|
<div class="gallery_btn" @click="complete">Complete</div>
|
||||||
@@ -133,8 +133,6 @@ export default defineComponent({
|
|||||||
// store.commit('setProbject',data)
|
// store.commit('setProbject',data)
|
||||||
}
|
}
|
||||||
const setprintModel = (value:any)=>{
|
const setprintModel = (value:any)=>{
|
||||||
console.log(value);
|
|
||||||
|
|
||||||
data.selectObject.position = value
|
data.selectObject.position = value
|
||||||
}
|
}
|
||||||
const formatter = (value: number)=>{
|
const formatter = (value: number)=>{
|
||||||
@@ -151,13 +149,14 @@ export default defineComponent({
|
|||||||
let value = {
|
let value = {
|
||||||
name:data.selectObject.name,
|
name:data.selectObject.name,
|
||||||
process:props.httpWorkflowType,
|
process:props.httpWorkflowType,
|
||||||
styleId:data.show.style?data.selectObject.sylteId:null,
|
styleId:data.show.style?data.selectObject.styleId:null,
|
||||||
id:data.selectObject.id,
|
id:data.selectObject.id,
|
||||||
workspace:{
|
workspace:{
|
||||||
sex:data.selectObject.sex,
|
sex:data.selectObject.sex,
|
||||||
// sex:data.show.gender?data.selectObject.sex:null,
|
// sex:data.show.gender?data.selectObject.sex:null,
|
||||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
||||||
position:data.show.position?data.selectObject.position.value:'Overall',
|
position:data.show.position?data.selectObject.position.value:'Overall',
|
||||||
|
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
||||||
// position:data.selectObject,
|
// position:data.selectObject,
|
||||||
} as any,
|
} as any,
|
||||||
|
|
||||||
@@ -172,7 +171,7 @@ export default defineComponent({
|
|||||||
model = {
|
model = {
|
||||||
id:rv.workspaceVO.mannequinFemaleId,
|
id:rv.workspaceVO.mannequinFemaleId,
|
||||||
type:rv.workspaceVO.mannequinFemaleType,
|
type:rv.workspaceVO.mannequinFemaleType,
|
||||||
url:rv.workspaceVO.malePresignedUrl,
|
url:rv.workspaceVO.femalePresignedUrl,
|
||||||
}
|
}
|
||||||
position = store.state.UserHabit.FemalePosition
|
position = store.state.UserHabit.FemalePosition
|
||||||
}else{
|
}else{
|
||||||
@@ -201,7 +200,7 @@ export default defineComponent({
|
|||||||
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
|
||||||
data.show.position = (props.workflowType == 'singleProductDesign')
|
data.show.position = (props.workflowType == 'singleProductDesign')
|
||||||
|
|
||||||
if(!data.mannequinStyle && props.workflowType == 'seriesDesign'){
|
if(!data.mannequinStyle && (props.workflowType == 'seriesDesign' || props.workflowType =='sketchDesign')){
|
||||||
data.setIsShowMark(true)
|
data.setIsShowMark(true)
|
||||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
||||||
(rv) => {
|
(rv) => {
|
||||||
|
|||||||
@@ -33,26 +33,7 @@
|
|||||||
<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 class="input_border productImg_content_item_generate">
|
|
||||||
<div class="input_box">
|
|
||||||
<div class="input_box_btnBox">
|
|
||||||
<input
|
|
||||||
class="search_input"
|
|
||||||
:placeholder="$t('Generate.inputContent1')"
|
|
||||||
v-model="productimgSearchName"
|
|
||||||
@keydown.enter="getPrductimg()"
|
|
||||||
/>
|
|
||||||
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
|
||||||
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
|
||||||
</div>
|
|
||||||
<textarea
|
|
||||||
v-show="productimgIsTextarea"
|
|
||||||
class="search_textarea "
|
|
||||||
@keydown.enter="getPrductimg()"
|
|
||||||
v-model="productimgSearchName"
|
|
||||||
></textarea>
|
|
||||||
</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>
|
||||||
@@ -93,6 +74,26 @@
|
|||||||
</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_box">
|
||||||
|
<div class="input_box_btnBox">
|
||||||
|
<input
|
||||||
|
class="search_input"
|
||||||
|
:placeholder="$t('Generate.inputContent1')"
|
||||||
|
v-model="productimgSearchName"
|
||||||
|
@keydown.enter="getPrductimg()"
|
||||||
|
/>
|
||||||
|
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
||||||
|
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
v-show="productimgIsTextarea"
|
||||||
|
class="search_textarea "
|
||||||
|
@keydown.enter="getPrductimg()"
|
||||||
|
v-model="productimgSearchName"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="productImg_content_item_generate_btn input_border">
|
<div class="productImg_content_item_generate_btn input_border">
|
||||||
<div class="input_box">
|
<div class="input_box">
|
||||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||||
@@ -524,6 +525,9 @@ export default defineComponent({
|
|||||||
.productImg_content_item_title{
|
.productImg_content_item_title{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
|
&.productImg_content_item_title_menu{
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.scaleImage_content{
|
.scaleImage_content{
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -549,11 +553,11 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.productImg_content_item_generate_btn{
|
.productImg_content_item_generate_btn{
|
||||||
// transform: translateY(100%);
|
// transform: translateY(100%);
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
top: auto;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.productImg_content_item_similarity{
|
.productImg_content_item_similarity{
|
||||||
padding-bottom: 2.4rem;
|
padding-bottom: 2.4rem;
|
||||||
@@ -576,7 +580,7 @@ export default defineComponent({
|
|||||||
img{
|
img{
|
||||||
width: auto;
|
width: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 40rem;
|
max-width: 50rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
&.active{
|
&.active{
|
||||||
@@ -584,7 +588,8 @@ export default defineComponent({
|
|||||||
img{
|
img{
|
||||||
// width: 50%;
|
// width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
|
margin: 0 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.img_operate_block{
|
.img_operate_block{
|
||||||
|
|||||||
@@ -1,13 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="brandDetail">
|
<div class="brandDetail">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div @click="back" class="back">< Back</div>
|
<div @click="back" class="back"><i class="fi fi-rr-arrow-small-left" style="font-size: 4rem; display:flex;"></i></div>
|
||||||
<div>
|
|
||||||
<div class="gallery_btn" @click="compute">Compute</div>
|
|
||||||
<div>
|
|
||||||
<a-progress :percent="100" size="small" :showInfo="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="userDetail">
|
<div class="userDetail">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
@@ -34,19 +28,25 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<span v-if="!isEditUserName">{{ brandName }}</span>
|
<span v-if="!isEditUserName" style="font-size:3rem;">{{ brandName }}</span>
|
||||||
<input v-else type="text" v-model="brandName">
|
<input v-else type="text" v-model="brandName">
|
||||||
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
|
<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
|
||||||
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
|
<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="slogan">
|
<div class="slogan">
|
||||||
<div>Brand slonan:</div>
|
<div>Slogan:</div>
|
||||||
<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
|
<span v-if="!isEditDescribe" style="font-weight: 300;">{{ brandSlogan }}</span>
|
||||||
<input v-else type="text" v-model="brandSlogan">
|
<input v-else type="text" v-model="brandSlogan">
|
||||||
<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
|
<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
|
||||||
<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
|
<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="flex:1;text-align: right;" v-show="imgList.length > 0">
|
||||||
|
<div class="gallery_btn" v-show="schedule.num == 1||(schedule.num == 0 && !schedule.state)" @click="compute">Compute</div>
|
||||||
|
<div v-show="schedule.num != 1">
|
||||||
|
<a-progress style="width:20rem;" :percent="schedule.num * 100" size="small" :showInfo="false" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
@@ -61,10 +61,12 @@
|
|||||||
>
|
>
|
||||||
<div class="gallery_btn">Upload</div>
|
<div class="gallery_btn">Upload</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
|
<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">Delete</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="imgBox">
|
<div class="imgBox">
|
||||||
<div class="imgItem" v-for="item,index in imgList" :key="item.id">
|
<div class="imgItem" v-for="item,index in imgList" :key="item.id" :class="{active:selectImgList.indexOf(item.id) > -1}" @click="selectImg(item)">
|
||||||
<img :src="item.url" alt="">
|
<img :src="item.url" alt="">
|
||||||
|
<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="total">
|
<div class="total">
|
||||||
@@ -86,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
import { defineComponent,computed,ref,provide,onBeforeUnmount,createVNode,toRefs, reactive} 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 { Modal,message } from 'ant-design-vue';
|
import { Modal,message } from 'ant-design-vue';
|
||||||
@@ -104,9 +106,11 @@ export default defineComponent({
|
|||||||
emits:['update:isShowMark','handleBack'],
|
emits:['update:isShowMark','handleBack'],
|
||||||
props: {
|
props: {
|
||||||
isShowMark:{type:Boolean,default:false},
|
isShowMark:{type:Boolean,default:false},
|
||||||
|
selectCode:{type:String,default:''},
|
||||||
},
|
},
|
||||||
setup(props,{emit}) {
|
setup(props,{emit}) {
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
|
const {t} = useI18n();
|
||||||
const data = reactive({
|
const data = reactive({
|
||||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||||
uploadUrl:'',
|
uploadUrl:'',
|
||||||
@@ -126,6 +130,12 @@ export default defineComponent({
|
|||||||
total:0,
|
total:0,
|
||||||
pageSize:10,
|
pageSize:10,
|
||||||
currentPage:1,
|
currentPage:1,
|
||||||
|
selectImgList:[] as any,//选择删除的图片
|
||||||
|
getProgressTime:null as any,//获取进度的时间
|
||||||
|
schedule:{
|
||||||
|
num:0,
|
||||||
|
state:false
|
||||||
|
}
|
||||||
})
|
})
|
||||||
const dataDom = reactive({
|
const dataDom = reactive({
|
||||||
Cropper:null as any,
|
Cropper:null as any,
|
||||||
@@ -233,6 +243,8 @@ export default defineComponent({
|
|||||||
data.brandSlogan = value.brandSlogan;
|
data.brandSlogan = value.brandSlogan;
|
||||||
data.logoUrl = value.minioUrl
|
data.logoUrl = value.minioUrl
|
||||||
data.minioUrl = value.brandLogo
|
data.minioUrl = value.brandLogo
|
||||||
|
clearInterval(data.getProgressTime)
|
||||||
|
getProgress()
|
||||||
getLibraryList()
|
getLibraryList()
|
||||||
// emit("update:isShowMark",true)
|
// emit("update:isShowMark",true)
|
||||||
// setTimeout(()=>{
|
// setTimeout(()=>{
|
||||||
@@ -240,6 +252,7 @@ export default defineComponent({
|
|||||||
// },2000)
|
// },2000)
|
||||||
}
|
}
|
||||||
const back = ()=>{
|
const back = ()=>{
|
||||||
|
clearInterval(data.getProgressTime)
|
||||||
emit("handleBack")
|
emit("handleBack")
|
||||||
}
|
}
|
||||||
const uploadBrand = ()=>{
|
const uploadBrand = ()=>{
|
||||||
@@ -255,12 +268,90 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const compute = ()=>{
|
const compute = ()=>{
|
||||||
|
Https.axiosPost(Https.httpUrls.productImageInitialize,{brandId:data.detail.id}).then((res:any)=>{
|
||||||
|
getProgress()
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
// console.log(err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const getProgress = ()=>{
|
||||||
|
setTimeout
|
||||||
|
if(props.selectCode != 'MyBrand'){
|
||||||
|
clearTimeout(data.getProgressTime)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.getInitializeProgress,{brandId:data.detail.id}).then((res:any)=>{
|
||||||
|
data.schedule.num = res.percent
|
||||||
|
data.schedule.state = res.analyzed
|
||||||
|
if(res.percent == 1 || !res.analyzed){return clearTimeout(data.getProgressTime)}
|
||||||
|
data.getProgressTime = setTimeout(()=>{
|
||||||
|
getProgress()
|
||||||
|
},5000)
|
||||||
|
// analyzed
|
||||||
|
|
||||||
|
}).catch((err:any)=>{
|
||||||
|
// console.log(err)
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
const changePage = (current:number, pageSize:number)=>{
|
const changePage = (current:number, pageSize:number)=>{
|
||||||
data.currentPage = current
|
data.currentPage = current
|
||||||
data.pageSize = pageSize
|
data.pageSize = pageSize
|
||||||
}
|
}
|
||||||
|
const deleteBatchPic = ()=>{
|
||||||
|
if(!data.selectImgList.length){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
Modal.confirm({
|
||||||
|
title: t('LibraryPage.jsContent2'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
confirmDeletePic('',0,'')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const deleteSinglePic = (data:any,index:any)=>{
|
||||||
|
Modal.confirm({
|
||||||
|
title: t('LibraryPage.jsContent1'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
confirmDeletePic(data,index,'')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const confirmDeletePic = (value:any,index:any,nData:any)=>{
|
||||||
|
let libraryIds = value ? [value.id] : data.selectImgList
|
||||||
|
let newData = {
|
||||||
|
libraryIds:libraryIds,
|
||||||
|
deleteModelConfirm:'',
|
||||||
|
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||||
|
}
|
||||||
|
if(nData)newData = nData
|
||||||
|
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
||||||
|
(rv: any) => {
|
||||||
|
getLibraryList()
|
||||||
|
data.selectImgList = []
|
||||||
|
}
|
||||||
|
).catch((res)=>{
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const selectImg = (item:any)=>{
|
||||||
|
if(data.selectImgList.indexOf(item.id) > -1){
|
||||||
|
data.selectImgList = data.selectImgList.filter((selectItem:any)=>selectItem != item.id)
|
||||||
|
}else{
|
||||||
|
data.selectImgList.push(item.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onBeforeUnmount(()=>{
|
||||||
|
clearInterval(data.getProgressTime)
|
||||||
|
})
|
||||||
return{
|
return{
|
||||||
...toRefs(dataDom),
|
...toRefs(dataDom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
@@ -274,6 +365,9 @@ export default defineComponent({
|
|||||||
editChek,
|
editChek,
|
||||||
compute,
|
compute,
|
||||||
changePage,
|
changePage,
|
||||||
|
deleteBatchPic,
|
||||||
|
deleteSinglePic,
|
||||||
|
selectImg,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
provide() {
|
provide() {
|
||||||
@@ -299,12 +393,16 @@ export default defineComponent({
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
margin-left: -2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .userDetail{
|
> .userDetail{
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 4rem;
|
margin-top: 2rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
> .logo{
|
> .logo{
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: 3rem;
|
margin-right: 3rem;
|
||||||
@@ -386,12 +484,32 @@ export default defineComponent({
|
|||||||
> .imgItem{
|
> .imgItem{
|
||||||
width: 100px;
|
width: 100px;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
aspect-ratio: 1 / 2.5;
|
aspect-ratio: 1 / 2.5;
|
||||||
|
&.active{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
> i{
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
> i{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .total{
|
> .total{
|
||||||
|
|||||||
@@ -32,7 +32,7 @@
|
|||||||
<input type="text" v-model="brandName">
|
<input type="text" v-model="brandName">
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="text">Brand Slogen <span style="color: red;">*</span></div>
|
<div class="text">Brand Slogan <span style="color: red;">*</span></div>
|
||||||
<input type="text" v-model="brandSlogan">
|
<input type="text" v-model="brandSlogan">
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
@@ -73,12 +73,12 @@
|
|||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<div class="text">Brand Name </div>
|
<div class="text">Brand Name </div>
|
||||||
<textarea v-model="generateText" :placeholder="'Please enter the name, logo, and slogan you want to generate'"></textarea>
|
<textarea v-model="generateText" :placeholder="'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.'"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
|
<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
|
||||||
<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">
|
<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">
|
||||||
<i class="fi fi-br-loading"></i>
|
<span class="fi fi-br-loading"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -352,6 +352,29 @@ export default defineComponent({
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
> .gallery_btn{
|
> .gallery_btn{
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
width: 13rem;
|
||||||
|
height: 6rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
> span{
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 6rem;
|
||||||
|
animation: whirl 1s infinite linear;
|
||||||
|
@keyframes whirl {
|
||||||
|
0%{
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -113,7 +113,8 @@ export default defineComponent({
|
|||||||
isSecondaryCreation:true,
|
isSecondaryCreation:true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
let portfolio:any = inject('portfolio')
|
// let portfolio:any = inject('portfolio')
|
||||||
|
|
||||||
// let setPortfolio:any = inject('setPortfolio')
|
// let setPortfolio:any = inject('setPortfolio')
|
||||||
let tagList = ref([
|
let tagList = ref([
|
||||||
// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},
|
// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},
|
||||||
|
|||||||
@@ -10,21 +10,28 @@
|
|||||||
>
|
>
|
||||||
|
|
||||||
<img v-if="item.url"
|
<img v-if="item.url"
|
||||||
|
:class="[isVideo?'video':'']"
|
||||||
@mouseenter.stop="gifPlay($event,item)"
|
@mouseenter.stop="gifPlay($event,item)"
|
||||||
@mouseleave.stop="gifPause($event,item)"
|
@mouseleave.stop="gifPause($event,item)"
|
||||||
:src="item.url"
|
:src="item.url"
|
||||||
alt=""
|
alt=""
|
||||||
>
|
>
|
||||||
<a-spin v-else size="large" class="content_img_flex"></a-spin>
|
<a-spin v-else size="large" class="content_img_flex"></a-spin>
|
||||||
<div class="btn like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
|
<div class="btn">
|
||||||
<i class="fi fi-rr-heart"></i>
|
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
|
||||||
</div>
|
<i class="fi fi-rr-heart"></i>
|
||||||
<div class="btn down" v-if="isVideo" @click.stop="down(item)">
|
</div>
|
||||||
<i class="fi fi-rr-heart"></i>
|
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
|
||||||
</div>
|
<i class="fi fi-ss-down-to-line"></i>
|
||||||
<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
|
</div>
|
||||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
|
||||||
|
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||||
|
</div>
|
||||||
|
<div class="delete" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
|
||||||
|
<i class="fi fi-rr-trash icon_delete"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -53,21 +60,21 @@ export default defineComponent({
|
|||||||
generalDragDom:null as any,
|
generalDragDom:null as any,
|
||||||
})
|
})
|
||||||
const collItemSize = reactive({
|
const collItemSize = reactive({
|
||||||
collValue:15,
|
collValue:18,
|
||||||
minCollValue:2,
|
num:2,
|
||||||
maxCollValue:20,
|
padding:40,
|
||||||
likeStyle:{
|
likeStyle:{
|
||||||
width:'100px',
|
width:'0px',
|
||||||
// width:'240px',
|
// width:'240px',
|
||||||
height:'200px',
|
height:'0px',
|
||||||
// height:'370px',
|
// height:'370px',
|
||||||
position:'absolute',
|
position:'absolute',
|
||||||
},
|
},
|
||||||
itemStyle:{
|
itemStyle:{
|
||||||
width:100,
|
width:0,
|
||||||
height:154,
|
height:0,
|
||||||
},
|
},
|
||||||
scale:[1,1.54],
|
scale:[1,1.539],
|
||||||
collTime:null as any,
|
collTime:null as any,
|
||||||
isMove:false,
|
isMove:false,
|
||||||
elList:[] as any,
|
elList:[] as any,
|
||||||
@@ -138,11 +145,11 @@ export default defineComponent({
|
|||||||
// })
|
// })
|
||||||
}
|
}
|
||||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||||
|
dataDom.generalDragDom
|
||||||
let elList:any = collItemSize.elList
|
let elList:any = collItemSize.elList
|
||||||
let index = data.selectIndex
|
let index = data.selectIndex
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
|
||||||
let width,height,num
|
let width,height,num
|
||||||
num = value
|
num = collItemSize.num
|
||||||
width = collItemSize.itemStyle.width
|
width = collItemSize.itemStyle.width
|
||||||
height = collItemSize.itemStyle.height
|
height = collItemSize.itemStyle.height
|
||||||
|
|
||||||
@@ -170,10 +177,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const moveItem = ()=>{
|
const moveItem = ()=>{
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
let value = collItemSize.num
|
||||||
// let num = str == 'like'?value:3
|
// let num = str == 'like'?value:3
|
||||||
for(let i = 0;i < collItemSize.elList.length;i++){
|
for(let i = 0;i < collItemSize.elList.length;i++){
|
||||||
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
|
collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + collItemSize.padding/2 + 'px';
|
||||||
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
|
collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -181,10 +188,11 @@ export default defineComponent({
|
|||||||
const setItemPosition = ()=>{
|
const setItemPosition = ()=>{
|
||||||
let parent = dataDom.generalDragDom.offsetWidth
|
let parent = dataDom.generalDragDom.offsetWidth
|
||||||
let elArr = dataDom.generalDragDom.children
|
let elArr = dataDom.generalDragDom.children
|
||||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
let value = collItemSize.num
|
||||||
collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
|
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
||||||
|
collItemSize.itemStyle.width = (parent - collItemSize.padding - ((value-1)*10)) / value
|
||||||
// collItemSize.itemStyle.width = (parent - (value * 10)) / value
|
// collItemSize.itemStyle.width = (parent - (value * 10)) / value
|
||||||
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
|
collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.539
|
||||||
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
|
collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
|
||||||
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
|
collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
|
||||||
collItemSize.elList = []
|
collItemSize.elList = []
|
||||||
@@ -242,22 +250,31 @@ export default defineComponent({
|
|||||||
e.target.src = item.url//静态图片
|
e.target.src = item.url//静态图片
|
||||||
// e.target.src = ''//静态图片
|
// e.target.src = ''//静态图片
|
||||||
}
|
}
|
||||||
const down = (item:any)=>{
|
const down = async (item:any)=>{
|
||||||
const videoUrl = item.videoUrl; // 视频文件 URL
|
const videoUrl = item.videoUrl; // 视频文件 URL
|
||||||
const fileName = 'video.mp4'; // 下载时保存的文件名
|
const response = await fetch(videoUrl);
|
||||||
|
const blob = await response.blob();
|
||||||
const link = document.createElement('a');
|
const blobUrl = URL.createObjectURL(blob);
|
||||||
link.href = videoUrl;
|
|
||||||
link.download = fileName;
|
const a = document.createElement('a');
|
||||||
|
a.href = blobUrl;
|
||||||
// 触发下载
|
a.download = 'video.mp4';
|
||||||
link.click();
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
|
||||||
|
// 清理
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(blobUrl);
|
||||||
|
}, 100);
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
window.addEventListener('resize', setItemPosition)
|
window.addEventListener('resize', setItemPosition)
|
||||||
// nextTick(()=>{
|
nextTick(()=>{
|
||||||
// setItemPosition()
|
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
|
||||||
// })
|
collItemSize.likeStyle.width = width + 'px'
|
||||||
|
collItemSize.likeStyle.height = width * 1.54 + 'px'
|
||||||
|
})
|
||||||
})
|
})
|
||||||
onBeforeUnmount(()=>{
|
onBeforeUnmount(()=>{
|
||||||
window.removeEventListener('resize', setItemPosition)
|
window.removeEventListener('resize', setItemPosition)
|
||||||
@@ -288,38 +305,57 @@ export default defineComponent({
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
> .item{
|
> .item{
|
||||||
border-radius: 2rem;
|
// border-radius: 2rem;
|
||||||
border: 2px solid;
|
// border: 2px solid;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: cover;
|
||||||
|
&.video{
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
> .btn{
|
> .btn{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2rem;
|
top: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
right: 2rem;
|
||||||
display: none;
|
display: none;
|
||||||
&.like{
|
flex-direction: column;
|
||||||
left: 2rem;
|
align-items: center;
|
||||||
|
background: rgba(255,255,255,.5);
|
||||||
|
> div{
|
||||||
|
padding: .8rem;
|
||||||
|
&:hover{
|
||||||
|
background: rgba(255,255,255,.7);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.zoom{
|
.like{
|
||||||
right: 2rem;
|
|
||||||
}
|
}
|
||||||
>i{
|
.zoom{
|
||||||
|
i{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.down{
|
||||||
|
}
|
||||||
|
.delete{
|
||||||
|
}
|
||||||
|
i{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
> .btn{
|
> .btn{
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,8 @@
|
|||||||
v-model:visible="liqufeaction"
|
v-model:visible="liqufeaction"
|
||||||
:footer="null"
|
:footer="null"
|
||||||
:get-container="() => $refs.liquefactionModal"
|
:get-container="() => $refs.liquefactionModal"
|
||||||
width="78%"
|
width="80%"
|
||||||
|
height="90%"
|
||||||
:maskClosable="false"
|
:maskClosable="false"
|
||||||
:centered="true"
|
:centered="true"
|
||||||
:closable="false"
|
:closable="false"
|
||||||
@@ -16,8 +17,8 @@
|
|||||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
|
||||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -30,6 +31,10 @@
|
|||||||
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
|
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
|
||||||
</div>
|
</div>
|
||||||
<div class="liquefaction_parameter">
|
<div class="liquefaction_parameter">
|
||||||
|
<div class="liquefaction_parameter_item icon">
|
||||||
|
<i class="icon iconfont icon-chehui" @click="historyState('reverse')"></i>
|
||||||
|
<i class="icon iconfont icon-fanchehui" @click="historyState('')"></i>
|
||||||
|
</div>
|
||||||
<div class="liquefaction_parameter_item">
|
<div class="liquefaction_parameter_item">
|
||||||
<div class="liquefaction_parameter_item_title">
|
<div class="liquefaction_parameter_item_title">
|
||||||
<span>{{ $t('exportModel.Size') }}</span>
|
<span>{{ $t('exportModel.Size') }}</span>
|
||||||
@@ -48,12 +53,9 @@
|
|||||||
<input type="range" v-model="density" @change="routesChange('density')">
|
<input type="range" v-model="density" @change="routesChange('density')">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="liquefaction_parameter_item icon">
|
|
||||||
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
|
|
||||||
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
|
|
||||||
</div>
|
|
||||||
<div class="liquefaction_parameter_item">
|
<div class="liquefaction_parameter_item">
|
||||||
<div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div>
|
<!-- <div class="generage_btn started_btn" @click="cancelDsign">{{ $t('Cropper.Cancel')}}</div> -->
|
||||||
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
|
<div class="generage_btn started_btn" @click="submit">{{ $t('Cropper.Finish')}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -406,16 +408,29 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.liquefactionModal{
|
||||||
|
:deep(.liquefaction){
|
||||||
|
.ant-modal-mask{
|
||||||
|
background: rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.liquefaction {
|
.liquefaction {
|
||||||
background: #f9fafb;
|
background: #f9fafb;
|
||||||
|
.generalModel_btn{
|
||||||
|
.generalModel_closeIcon{
|
||||||
|
transform: translate(-100%, 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
.liquefaction_center{
|
.liquefaction_center{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
.liquefaction_canvas_box{
|
.liquefaction_canvas_box{
|
||||||
background: #fff;
|
background: #fff;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
width: 80%;
|
width: 55%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// overflow-x: auto;
|
// overflow-x: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -426,9 +441,11 @@ export default defineComponent({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.liquefaction_parameter{
|
.liquefaction_parameter{
|
||||||
padding-top: 5rem;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex: 1;
|
// flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
.liquefaction_parameter_item{
|
.liquefaction_parameter_item{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -455,7 +472,7 @@ export default defineComponent({
|
|||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid #000;
|
// border: 2px solid #000;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ export default {
|
|||||||
CanvasTool:'画布工具',
|
CanvasTool:'画布工具',
|
||||||
Color:'颜色',
|
Color:'颜色',
|
||||||
Size:'大小',
|
Size:'大小',
|
||||||
Brushwork:'绘画',
|
Brushwork:'笔触',
|
||||||
Texture:'材质',
|
Texture:'材质',
|
||||||
FillBack:'填充 & 边',
|
FillBack:'填充 & 边',
|
||||||
Layer:'层级',
|
Layer:'层级',
|
||||||
@@ -155,9 +155,10 @@ export default {
|
|||||||
Reset:'重置',
|
Reset:'重置',
|
||||||
Design:'设计',
|
Design:'设计',
|
||||||
Redesign:'重新设计',
|
Redesign:'重新设计',
|
||||||
GeneratedDesign:'生成设计,请选择您最喜欢的设计',
|
GeneratedDesign:'设计草稿',
|
||||||
|
elementTitle:'设计素材',
|
||||||
recycleBin:'回收站',
|
recycleBin:'回收站',
|
||||||
SelectedDesign:'喜欢的设计',
|
SelectedDesign:'设计集',
|
||||||
Export:'导出',
|
Export:'导出',
|
||||||
moodboard:"情绪板",
|
moodboard:"情绪板",
|
||||||
printboard:"印刷板",
|
printboard:"印刷板",
|
||||||
@@ -178,13 +179,17 @@ export default {
|
|||||||
jsContent10:"二次创作的作品不允许使用'设计',但是您可以使用'重新设计'",
|
jsContent10:"二次创作的作品不允许使用'设计',但是您可以使用'重新设计'",
|
||||||
},
|
},
|
||||||
ProductImg:{
|
ProductImg:{
|
||||||
|
productInput:'输入关键词(例如风格、材质)',
|
||||||
|
relightInput:'输入关键词(例如场景、地点)',
|
||||||
Finalize:'完成',
|
Finalize:'完成',
|
||||||
SelectCollection:'选择的系列',
|
SelectCollection:'选择要转换的图片',
|
||||||
|
SelectedDesign:'产品图集',
|
||||||
|
productImageDrafts:'产品图草稿',
|
||||||
Upload:'上传',
|
Upload:'上传',
|
||||||
MagicTools:'转换产品图工具',
|
MagicTools:'转换产品图工具',
|
||||||
relightingTool:'打光工具',
|
relightingTool:'打光工具',
|
||||||
Similarity:'相似度',
|
Similarity:'相似度',
|
||||||
Highlight:'高亮',
|
Highlight:'曝光强度',
|
||||||
RelightDirection:'打光方向',
|
RelightDirection:'打光方向',
|
||||||
GenerateProduct:'生成的产品',
|
GenerateProduct:'生成的产品',
|
||||||
SelectedProduct:'选择的产品',
|
SelectedProduct:'选择的产品',
|
||||||
@@ -199,6 +204,9 @@ export default {
|
|||||||
Clear:'清空',
|
Clear:'清空',
|
||||||
jsContent1:'如果您离开此页,您的更改将会丢失。您确定要离开这一页吗?',
|
jsContent1:'如果您离开此页,您的更改将会丢失。您确定要离开这一页吗?',
|
||||||
jsContent2:'请至少选择一张图片',
|
jsContent2:'请至少选择一张图片',
|
||||||
|
},
|
||||||
|
poseTransfer:{
|
||||||
|
|
||||||
},
|
},
|
||||||
LibraryPage:{
|
LibraryPage:{
|
||||||
Organize:'整理',
|
Organize:'整理',
|
||||||
@@ -247,6 +255,8 @@ export default {
|
|||||||
jsContent7:'请输入内容~',
|
jsContent7:'请输入内容~',
|
||||||
jsContent8:'上传失败',
|
jsContent8:'上传失败',
|
||||||
jsContent9:'选择一张图片~',
|
jsContent9:'选择一张图片~',
|
||||||
|
jsContent10:'是否另存为当前模特?',
|
||||||
|
jsContent11:'你确定删除当前品牌DNA吗?',
|
||||||
},
|
},
|
||||||
HistoryPage:{
|
HistoryPage:{
|
||||||
History:'历史',
|
History:'历史',
|
||||||
@@ -360,7 +370,7 @@ export default {
|
|||||||
jsContent4:"请选择一张图片",
|
jsContent4:"请选择一张图片",
|
||||||
jsContent5:"输入的内容超过允许输入的最大长度",
|
jsContent5:"输入的内容超过允许输入的最大长度",
|
||||||
jsContent6:"请输入内容~",
|
jsContent6:"请输入内容~",
|
||||||
jsContent7:"请检查*号内容",
|
jsContent7:"请确保所有必填项都填妥",
|
||||||
},
|
},
|
||||||
ColorboardUpload:{
|
ColorboardUpload:{
|
||||||
Thumbnail:'选择的颜色缩略图',
|
Thumbnail:'选择的颜色缩略图',
|
||||||
@@ -368,7 +378,7 @@ export default {
|
|||||||
Palette:'调色板',
|
Palette:'调色板',
|
||||||
HEX:'HEX',
|
HEX:'HEX',
|
||||||
RGBA:'RGBA',
|
RGBA:'RGBA',
|
||||||
UploadImage:'上传图片',
|
UploadImage:'提取主色',
|
||||||
ColorCode:'颜色代码',
|
ColorCode:'颜色代码',
|
||||||
SelectSuccessively:'连选',
|
SelectSuccessively:'连选',
|
||||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
||||||
@@ -388,7 +398,7 @@ export default {
|
|||||||
jsContent6:"请至少选择一个情绪版或者印花",
|
jsContent6:"请至少选择一个情绪版或者印花",
|
||||||
},
|
},
|
||||||
selectImgList:{
|
selectImgList:{
|
||||||
SelectImg:'选择图片',
|
SelectImg:'选择图片来提取主色',
|
||||||
Clear:'关闭',
|
Clear:'关闭',
|
||||||
},
|
},
|
||||||
MoodboardUpload:{
|
MoodboardUpload:{
|
||||||
@@ -438,7 +448,7 @@ export default {
|
|||||||
Model1:'笔墨画风',
|
Model1:'笔墨画风',
|
||||||
Model2:'插画画风',
|
Model2:'插画画风',
|
||||||
Model3:'真实画风',
|
Model3:'真实画风',
|
||||||
inputContent1:'输入生成图片的标题',
|
inputContent1:'输入生成图片的提示词',
|
||||||
Generate:'生成',
|
Generate:'生成',
|
||||||
Sequence:'队列',
|
Sequence:'队列',
|
||||||
Close:'取消',
|
Close:'取消',
|
||||||
@@ -493,7 +503,7 @@ export default {
|
|||||||
CurrentElements:'当前元素',
|
CurrentElements:'当前元素',
|
||||||
},
|
},
|
||||||
DesignDetailAlter:{
|
DesignDetailAlter:{
|
||||||
current:'当前',
|
current:'项目',
|
||||||
Upload:'上传',
|
Upload:'上传',
|
||||||
Library:'收藏',
|
Library:'收藏',
|
||||||
inputContent1:'输入名字进行搜索',
|
inputContent1:'输入名字进行搜索',
|
||||||
@@ -560,16 +570,16 @@ export default {
|
|||||||
NewYear_2025:'新年 2025',
|
NewYear_2025:'新年 2025',
|
||||||
},
|
},
|
||||||
Publish:{
|
Publish:{
|
||||||
Publish:'发布',
|
Publish:'发布到作品广场',
|
||||||
CoverPicture:'封面图',
|
CoverPicture:'封面图',
|
||||||
CollectionTitle:'系列名字',
|
CollectionTitle:'系列名字',
|
||||||
topic:'话题',
|
topic:'话题',
|
||||||
Description:'描述',
|
Description:'描述',
|
||||||
Permissions:'权限',
|
Permissions:'权限',
|
||||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
PermissionsItem1:'允许其他用户进行二次创作。',
|
||||||
Close:'关闭',
|
Close:'取消',
|
||||||
UpdatePublish:'更新发布',
|
UpdatePublish:'更新发布',
|
||||||
jsContent1:'如果您离开此页,您的更改将会丢失。您确定要离开这一页吗?',
|
jsContent1:'您确定要离开这一页吗?你的更改没有被保存。',
|
||||||
jsContent2:'请输入您的作品名称',
|
jsContent2:'请输入您的作品名称',
|
||||||
jsContent3:'这将把您的作品发布到广场上,供所有用户查看。请确认是否发布?',
|
jsContent3:'这将把您的作品发布到广场上,供所有用户查看。请确认是否发布?',
|
||||||
jsContent4:'发布成功!你可以在我的作品中找到',
|
jsContent4:'发布成功!你可以在我的作品中找到',
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ export default {
|
|||||||
CanvasTool:'Canvas Tool',
|
CanvasTool:'Canvas Tool',
|
||||||
Color:'Color',
|
Color:'Color',
|
||||||
Size:'Size',
|
Size:'Size',
|
||||||
Brushwork:'Brushwork',
|
Brushwork:'Brush',
|
||||||
Texture:'Texture',
|
Texture:'Texture',
|
||||||
FillBack:'Fill & Border',
|
FillBack:'Fill & Border',
|
||||||
Layer:'Layer',
|
Layer:'Layer',
|
||||||
@@ -155,9 +155,10 @@ export default {
|
|||||||
Reset:'Reset',
|
Reset:'Reset',
|
||||||
Design:'Design',
|
Design:'Design',
|
||||||
Redesign:'Redesign',
|
Redesign:'Redesign',
|
||||||
GeneratedDesign:'Generated Design,please choose your favorite design',
|
GeneratedDesign:'Design Drafts',
|
||||||
|
elementTitle:'Design Assets',
|
||||||
recycleBin:'Recycle Bin',
|
recycleBin:'Recycle Bin',
|
||||||
SelectedDesign:'Selected Design',
|
SelectedDesign:'Design Collection',
|
||||||
Export:'Export',
|
Export:'Export',
|
||||||
moodboard:"moodboard",
|
moodboard:"moodboard",
|
||||||
printboard:"printboard",
|
printboard:"printboard",
|
||||||
@@ -178,11 +179,15 @@ export default {
|
|||||||
jsContent10:"Re-created works are not allowed to use 'design', but you can use 'redesign'",
|
jsContent10:"Re-created works are not allowed to use 'design', but you can use 'redesign'",
|
||||||
},
|
},
|
||||||
ProductImg:{
|
ProductImg:{
|
||||||
|
productInput:'Enter keywords (e.g. Style, Material)',
|
||||||
|
relightInput:'Enter keywords (e.g. Scene, Location)',
|
||||||
Finalize:'Finalize',
|
Finalize:'Finalize',
|
||||||
SelectCollection:'Select Collection',
|
SelectCollection:'Select image to convert',
|
||||||
|
SelectedDesign:'Product Image Collection',
|
||||||
|
productImageDrafts:'Product Image Drafts',
|
||||||
Upload:'Upload',
|
Upload:'Upload',
|
||||||
Similarity:'Similarity',
|
Similarity:'Similarity',
|
||||||
Highlight:'Highlight',
|
Highlight:'Exposure Intensity',
|
||||||
RelightDirection:'Relight Direction',
|
RelightDirection:'Relight Direction',
|
||||||
MagicTools:'To Product lmage Tool',
|
MagicTools:'To Product lmage Tool',
|
||||||
relightingTool:'Relighting Tool',
|
relightingTool:'Relighting Tool',
|
||||||
@@ -199,6 +204,9 @@ export default {
|
|||||||
Clear:'Clear',
|
Clear:'Clear',
|
||||||
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
||||||
jsContent2:'Please select at least one picture',
|
jsContent2:'Please select at least one picture',
|
||||||
|
},
|
||||||
|
poseTransfer:{
|
||||||
|
|
||||||
},
|
},
|
||||||
LibraryPage:{
|
LibraryPage:{
|
||||||
Organize:'Organize',
|
Organize:'Organize',
|
||||||
@@ -247,6 +255,8 @@ export default {
|
|||||||
jsContent7:'Please enter content',
|
jsContent7:'Please enter content',
|
||||||
jsContent8:'upload failed',
|
jsContent8:'upload failed',
|
||||||
jsContent9:'Please select a picture',
|
jsContent9:'Please select a picture',
|
||||||
|
jsContent10:'Save as New or Overwrite Current Mannequin?',
|
||||||
|
jsContent11:'Are you sure about deleting the current brand DNA?',
|
||||||
},
|
},
|
||||||
HistoryPage:{
|
HistoryPage:{
|
||||||
History:'History',
|
History:'History',
|
||||||
@@ -329,7 +339,7 @@ export default {
|
|||||||
PIN:'PIN',
|
PIN:'PIN',
|
||||||
Maximum:'Maximum {maxImg} images can be uploaded, Maximum 5MB per image',
|
Maximum:'Maximum {maxImg} images can be uploaded, Maximum 5MB per image',
|
||||||
Thumbnail:'Selected sketchboard',
|
Thumbnail:'Selected sketchboard',
|
||||||
inputContent1:'Input prompt',
|
inputContent1:'Input prompt for image generation',
|
||||||
maximumLength:'The entered content exceeds the maximum length.',
|
maximumLength:'The entered content exceeds the maximum length.',
|
||||||
GenerateSketch:'Generate Sketch',
|
GenerateSketch:'Generate Sketch',
|
||||||
jsContent1:"upload failed",
|
jsContent1:"upload failed",
|
||||||
@@ -360,15 +370,15 @@ export default {
|
|||||||
jsContent4:"Please select a picture",
|
jsContent4:"Please select a picture",
|
||||||
jsContent5:"The entered content exceeds the maximum length.",
|
jsContent5:"The entered content exceeds the maximum length.",
|
||||||
jsContent6:"Please enter content",
|
jsContent6:"Please enter content",
|
||||||
jsContent7:"Please check the * number",
|
jsContent7:"Please ensure all required fields are filled out",
|
||||||
},
|
},
|
||||||
ColorboardUpload:{
|
ColorboardUpload:{
|
||||||
Thumbnail:'Thumbnail preview of selected colorboard',
|
Thumbnail:'Thumbnail preview of selected colors',
|
||||||
Clear:'Clear',
|
Clear:'Clear',
|
||||||
Palette:'Palette',
|
Palette:'Palette',
|
||||||
HEX:'HEX',
|
HEX:'HEX',
|
||||||
RGBA:'RGBA',
|
RGBA:'RGBA',
|
||||||
UploadImage:'Upload Image',////////////
|
UploadImage:'Extract main colors',////////////
|
||||||
ColorCode:'Color Code',
|
ColorCode:'Color Code',
|
||||||
SelectSuccessively:'Successive',
|
SelectSuccessively:'Successive',
|
||||||
SelectSuccessivelyOnTitle:'Enable successive color selection.',
|
SelectSuccessivelyOnTitle:'Enable successive color selection.',
|
||||||
@@ -388,7 +398,7 @@ export default {
|
|||||||
jsContent6:"Please select at least one mood plate or print",
|
jsContent6:"Please select at least one mood plate or print",
|
||||||
},
|
},
|
||||||
selectImgList:{
|
selectImgList:{
|
||||||
SelectImg:' Select Image',
|
SelectImg:' Select image for main color extraction',
|
||||||
Clear:'Close',
|
Clear:'Close',
|
||||||
},
|
},
|
||||||
MoodboardUpload:{
|
MoodboardUpload:{
|
||||||
@@ -414,7 +424,7 @@ export default {
|
|||||||
CropPreview:'Crop Preview',
|
CropPreview:'Crop Preview',
|
||||||
},
|
},
|
||||||
Material:{
|
Material:{
|
||||||
inputContent1:'Please input',
|
inputContent1:'Please enter name to search',
|
||||||
PIN:'PIN',
|
PIN:'PIN',
|
||||||
},
|
},
|
||||||
MarketingSketchUpload:{
|
MarketingSketchUpload:{
|
||||||
@@ -493,7 +503,7 @@ export default {
|
|||||||
CurrentElements:'Current Elements',
|
CurrentElements:'Current Elements',
|
||||||
},
|
},
|
||||||
DesignDetailAlter:{
|
DesignDetailAlter:{
|
||||||
current:'Current',
|
current:'Project',
|
||||||
Upload:'Upload',
|
Upload:'Upload',
|
||||||
Library:'Library',
|
Library:'Library',
|
||||||
inputContent1:'Please input',
|
inputContent1:'Please input',
|
||||||
@@ -560,16 +570,16 @@ export default {
|
|||||||
NewYear_2025:'NewYear 2025',
|
NewYear_2025:'NewYear 2025',
|
||||||
},
|
},
|
||||||
Publish:{
|
Publish:{
|
||||||
Publish:'Publish',
|
Publish:'Publish to gallery',
|
||||||
CoverPicture:'Cover Picture',
|
CoverPicture:'Cover Picture',
|
||||||
CollectionTitle:'Collection Title',
|
CollectionTitle:'Collection Title',
|
||||||
topic:'Topic',
|
topic:'Topic',
|
||||||
Description:'Description',
|
Description:'Description',
|
||||||
Permissions:'Permissions',
|
Permissions:'Permissions',
|
||||||
PermissionsItem1:'Allow other users to perform secondary creation.',
|
PermissionsItem1:'Allow other users to perform secondary creation.',
|
||||||
Close:'Close',
|
Close:'Cancel',
|
||||||
UpdatePublish:'Update Publish',
|
UpdatePublish:'Update Publish',
|
||||||
jsContent1:'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
|
jsContent1:'Are you sure to leave this page? Your changes are not saved. ',
|
||||||
jsContent2:'Please enter the name of your work',
|
jsContent2:'Please enter the name of your work',
|
||||||
jsContent3:'This will publish your work to the square for all users to see. Please confirm whether to publish?',
|
jsContent3:'This will publish your work to the square for all users to see. Please confirm whether to publish?',
|
||||||
jsContent4:'Release success! You can find it in my work',
|
jsContent4:'Release success! You can find it in my work',
|
||||||
|
|||||||
@@ -244,7 +244,9 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
|||||||
state.selectDetail.color = state.selectDetail?.newDetail?.color
|
state.selectDetail.color = state.selectDetail?.newDetail?.color
|
||||||
state.selectDetail.newDetail.color = null
|
state.selectDetail.newDetail.color = null
|
||||||
}
|
}
|
||||||
|
if(item.partialDesign){
|
||||||
|
state.selectDetail.partialDesign = item.partialDesign
|
||||||
|
}
|
||||||
state.selectDetail.designType = item.designType
|
state.selectDetail.designType = item.designType
|
||||||
state.selectDetail.gradient = item.gradient
|
state.selectDetail.gradient = item.gradient
|
||||||
state.selectDetail.layersObject = item.layersObject
|
state.selectDetail.layersObject = item.layersObject
|
||||||
@@ -261,7 +263,6 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
|||||||
}
|
}
|
||||||
state.selectDetail.id = item.id
|
state.selectDetail.id = item.id
|
||||||
if(state.selectDetail.newDetail?.[currentType])delete state.selectDetail.newDetail[currentType]
|
if(state.selectDetail.newDetail?.[currentType])delete state.selectDetail.newDetail[currentType]
|
||||||
console.log(state.selectDetail.newDetail);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@@ -56,6 +56,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
|
|||||||
state.designCollectionList = data
|
state.designCollectionList = data
|
||||||
},
|
},
|
||||||
setLikeDesignCollectionList(state,data){
|
setLikeDesignCollectionList(state,data){
|
||||||
|
data = data || []
|
||||||
state.likeDesignCollectionList = data
|
state.likeDesignCollectionList = data
|
||||||
},
|
},
|
||||||
setRelightList(state,data){
|
setRelightList(state,data){
|
||||||
|
|||||||
@@ -151,10 +151,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
data.collectionChecked = true
|
data.collectionChecked = true
|
||||||
file.push(data)
|
file.push(data)
|
||||||
}
|
}
|
||||||
}else{
|
}else if(data.state == 'delete'){
|
||||||
//重复选中后取消选择改为无反应
|
//重复选中后取消选择改为无反应
|
||||||
// data.collectionChecked = false
|
data.collectionChecked = false
|
||||||
// file = file.filter((v:any)=> v.id != data.id)
|
delete data.state
|
||||||
|
file = file.filter((v:any)=> v.id != data.id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(data.type_.type1 == 'generate'){
|
if(data.type_.type1 == 'generate'){
|
||||||
@@ -405,9 +406,17 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
|||||||
});
|
});
|
||||||
data[str] = colorBoards
|
data[str] = colorBoards
|
||||||
}else if(str == 'moodBoard'){
|
}else if(str == 'moodBoard'){
|
||||||
|
state.moodboard = state.moodboard || []
|
||||||
|
let dataList = state.moodboard.map((v: any) => {
|
||||||
|
let data: any = {
|
||||||
|
id: v.resData.id,
|
||||||
|
designType: v.resData.designType,
|
||||||
|
};
|
||||||
|
return data;
|
||||||
|
});
|
||||||
data[str] = {
|
data[str] = {
|
||||||
moodBoards:state.moodboard,
|
moodBoards:dataList,
|
||||||
moodTemplateId:state.moodTemplateId,
|
moodTemplateId:state.allBoardData.disposeMoodboard?.[0]?.id?state.allBoardData.disposeMoodboard?.[0]?.id:null,
|
||||||
moodboardPosition:JSON.stringify(state.moodboardPosition),
|
moodboardPosition:JSON.stringify(state.moodboardPosition),
|
||||||
}
|
}
|
||||||
}else if (str == 'printBoard') {
|
}else if (str == 'printBoard') {
|
||||||
|
|||||||
@@ -60,7 +60,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
},
|
},
|
||||||
setProbject(state,data){
|
setProbject(state,data){
|
||||||
for (const key in data) {
|
for (const key in data) {
|
||||||
if(state.probjects[key] == undefined)return
|
if(data[key] == undefined)continue
|
||||||
state.probjects[key] = data[key]
|
state.probjects[key] = data[key]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -71,7 +71,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
|||||||
type:'',
|
type:'',
|
||||||
httpType:'',
|
httpType:'',
|
||||||
styleName:'',//项目风格
|
styleName:'',//项目风格
|
||||||
styleId:-1,//项目风格
|
styleId:null,//项目风格
|
||||||
style:'',
|
style:'',
|
||||||
sex:'Female',
|
sex:'Female',
|
||||||
ageGroup:'Adult',//年龄组
|
ageGroup:'Adult',//年龄组
|
||||||
|
|||||||
@@ -71,6 +71,8 @@ class MyCanvas {
|
|||||||
this.canvasWH={
|
this.canvasWH={
|
||||||
width:0,
|
width:0,
|
||||||
height:0,
|
height:0,
|
||||||
|
layerWidth:0,
|
||||||
|
layerHeight:0,
|
||||||
}
|
}
|
||||||
this.createPatterning = {//创建图形
|
this.createPatterning = {//创建图形
|
||||||
state:false,
|
state:false,
|
||||||
@@ -143,6 +145,9 @@ class MyCanvas {
|
|||||||
value:0,
|
value:0,
|
||||||
list:[],
|
list:[],
|
||||||
}
|
}
|
||||||
|
this.exportData = {
|
||||||
|
width:-1,
|
||||||
|
}
|
||||||
for (let index = 0; index < 20; index++) {
|
for (let index = 0; index < 20; index++) {
|
||||||
this.texture.list.push({value:index,url:`/image/texture/texture${index}.webp`})
|
this.texture.list.push({value:index,url:`/image/texture/texture${index}.webp`})
|
||||||
}
|
}
|
||||||
@@ -163,10 +168,79 @@ class MyCanvas {
|
|||||||
}//给切换颜色设置防抖
|
}//给切换颜色设置防抖
|
||||||
|
|
||||||
}
|
}
|
||||||
async canvasInit (dom, val,img,editGroupImg,data){//初始化
|
async createCanvas(dom,val,exportWidth = -1){
|
||||||
|
this.exportData.width = exportWidth
|
||||||
|
this.canvasWH={
|
||||||
|
width:val.width,
|
||||||
|
height:val.height,
|
||||||
|
layerWidth:val.width,
|
||||||
|
layerHeight:val.height,
|
||||||
|
}
|
||||||
|
this.canvasDomParent = dom;
|
||||||
|
var canvasDom = document.createElement("canvas");
|
||||||
|
this.canvasDomParent.appendChild(canvasDom);
|
||||||
|
MyCanvas[this.id] = await new fabric.Canvas(canvasDom, {
|
||||||
|
backgroundColor: "rgba(230, 230, 230)",
|
||||||
|
width: this.canvasWH.width,
|
||||||
|
height: this.canvasWH.height,
|
||||||
|
isDrawingMode: val.isDrawingMode, // 开启绘图模式
|
||||||
|
selectionFullyContained: true,
|
||||||
|
selectionKey:'ctrlKey',
|
||||||
|
includeDefaultValues: false,//尚未测试 精简导出JSON
|
||||||
|
// freeDrawingCursor: 'none',
|
||||||
|
preserveObjectStacking:true,
|
||||||
|
hoverCursor: 'pointer',
|
||||||
|
});
|
||||||
|
this.initCanvasWH('init')
|
||||||
|
fabric.Object.prototype.cornerSize = 10//选中后的操作按钮大小
|
||||||
|
fabric.Object.prototype.transparentCorners = false //实心
|
||||||
|
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
|
||||||
|
JSSetRemoveImage(this.deleteObject.bind(this))
|
||||||
|
}else{
|
||||||
|
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
initAligningGuidelines(MyCanvas?.[this.id], true);
|
||||||
|
JSchangeType(MyCanvas?.[this.id],'init')
|
||||||
|
this.canvas = MyCanvas?.[this.id];
|
||||||
|
// console.log(this.layer)
|
||||||
|
return MyCanvas?.[this.id]
|
||||||
|
}
|
||||||
|
addEvent(){
|
||||||
|
MyCanvas?.[this.id].on("object:modified", (event)=>{
|
||||||
|
this.updateCanvasState('')
|
||||||
|
this.updataLayer()
|
||||||
|
});
|
||||||
|
this.canvasKeyDown = this.canvasKeyDown.bind(this);
|
||||||
|
this.canvasKeyUp = this.canvasKeyUp.bind(this);
|
||||||
|
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
|
||||||
|
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
|
||||||
|
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
|
||||||
|
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
|
||||||
|
//双击
|
||||||
|
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
|
||||||
|
if(this.operation == 'fold'){
|
||||||
|
this.foldEnd('Enter')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.addEventListener('mousemove', this.mouseMove.bind(this));
|
||||||
|
document.addEventListener('touchmove', this.touchmove.bind(this));
|
||||||
|
document.addEventListener("keydown", this.canvasKeyDown);
|
||||||
|
document.addEventListener("keyup", this.canvasKeyUp);
|
||||||
|
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
|
||||||
|
}
|
||||||
|
async canvasInit (dom, val,img,editGroupImg,data,exportWidth = -1){//初始化
|
||||||
// let {erasable} = data
|
// let {erasable} = data
|
||||||
// this.canvasClear()
|
// this.canvasClear()
|
||||||
this.canvasWH = val
|
console.log(exportWidth)
|
||||||
|
this.exportData.width = exportWidth
|
||||||
|
this.canvasWH={
|
||||||
|
width:val.width,
|
||||||
|
height:val.height,
|
||||||
|
layerWidth:val.width,
|
||||||
|
layerHeight:val.height,
|
||||||
|
}
|
||||||
this.canvasDomParent = dom;
|
this.canvasDomParent = dom;
|
||||||
var canvasDom = document.createElement("canvas");
|
var canvasDom = document.createElement("canvas");
|
||||||
this.canvasDomParent.appendChild(canvasDom);
|
this.canvasDomParent.appendChild(canvasDom);
|
||||||
@@ -289,7 +363,9 @@ class MyCanvas {
|
|||||||
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
|
MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
|
||||||
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
|
MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
|
||||||
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
|
MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
|
||||||
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
|
if(!data?.noWheel){
|
||||||
|
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
|
||||||
|
}
|
||||||
//双击
|
//双击
|
||||||
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
|
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
|
||||||
if(this.operation == 'fold'){
|
if(this.operation == 'fold'){
|
||||||
@@ -305,13 +381,12 @@ class MyCanvas {
|
|||||||
JSchangeType(MyCanvas?.[this.id],'init')
|
JSchangeType(MyCanvas?.[this.id],'init')
|
||||||
// await this.createBg()
|
// await this.createBg()
|
||||||
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
|
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
|
||||||
if(img && editGroupImg){
|
|
||||||
|
if(img && data.dashedIsDetail){
|
||||||
this.dashed.isDetail = true
|
this.dashed.isDetail = true
|
||||||
await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
|
await this.createLayer({editImg:editGroupImg,noErasable:data?.noErasable || false})//创建图层并且使用
|
||||||
}
|
}
|
||||||
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
|
MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
|
||||||
|
|
||||||
// MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
|
|
||||||
this.canvas = MyCanvas?.[this.id];
|
this.canvas = MyCanvas?.[this.id];
|
||||||
return MyCanvas?.[this.id]
|
return MyCanvas?.[this.id]
|
||||||
}
|
}
|
||||||
@@ -336,11 +411,11 @@ class MyCanvas {
|
|||||||
},
|
},
|
||||||
scale
|
scale
|
||||||
)
|
)
|
||||||
MyCanvas?.[this.id].setBackgroundColor({
|
// MyCanvas?.[this.id].setBackgroundColor({
|
||||||
source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
|
// source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
|
||||||
repeat: 'repeat',
|
// repeat: 'repeat',
|
||||||
},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
|
// },MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
|
||||||
)
|
// )
|
||||||
}
|
}
|
||||||
mouseMove(event){
|
mouseMove(event){
|
||||||
let e = getMousePosition(event,false)
|
let e = getMousePosition(event,false)
|
||||||
@@ -373,6 +448,7 @@ class MyCanvas {
|
|||||||
this.setPencil()
|
this.setPencil()
|
||||||
this.pencilbtnStyle.display = `block`
|
this.pencilbtnStyle.display = `block`
|
||||||
this.setCursor('none');
|
this.setCursor('none');
|
||||||
|
this.setGroupGrid('all')
|
||||||
MyCanvas[this.id].freeDrawingCursor = 'none'
|
MyCanvas[this.id].freeDrawingCursor = 'none'
|
||||||
}else if(str == 'move'){
|
}else if(str == 'move'){
|
||||||
JSchangeType(MyCanvas?.[this.id],'')
|
JSchangeType(MyCanvas?.[this.id],'')
|
||||||
@@ -452,11 +528,15 @@ class MyCanvas {
|
|||||||
MyCanvas[this.id].upperCanvasEl.style.cursor = str;
|
MyCanvas[this.id].upperCanvasEl.style.cursor = str;
|
||||||
}
|
}
|
||||||
setCanvasMove = (event)=>{
|
setCanvasMove = (event)=>{
|
||||||
|
|
||||||
if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
|
if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
|
||||||
if(MyCanvas?.[this.id].isDrawingMode){
|
if(MyCanvas?.[this.id].isDrawingMode){
|
||||||
}else{
|
}else{
|
||||||
let getActiveObject = MyCanvas?.[this.id].getActiveObject()
|
let getActiveObject = MyCanvas?.[this.id].getActiveObject()
|
||||||
|
// console.log(getActiveObject)
|
||||||
|
// console.log(!this.clipPath.isImg ,
|
||||||
|
// this.mouse.isDown ,
|
||||||
|
// getActiveObject?.custom?.dashed ,
|
||||||
|
// this.layer.selectLayer.group.custom?.groupType == 'Grid')
|
||||||
if(
|
if(
|
||||||
!this.clipPath.isImg &&
|
!this.clipPath.isImg &&
|
||||||
this.mouse.isDown &&
|
this.mouse.isDown &&
|
||||||
@@ -594,9 +674,7 @@ class MyCanvas {
|
|||||||
// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
|
// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
|
||||||
// this.createPatterning.textDataShow = true
|
// this.createPatterning.textDataShow = true
|
||||||
// this.createText = clickedObject
|
// this.createText = clickedObject
|
||||||
// console.log(1);
|
|
||||||
// }else{
|
// }else{
|
||||||
// console.log(2);
|
|
||||||
// this.createPatterning.textDataShow = false
|
// this.createPatterning.textDataShow = false
|
||||||
// this.createText = {}
|
// this.createText = {}
|
||||||
// }
|
// }
|
||||||
@@ -686,7 +764,7 @@ class MyCanvas {
|
|||||||
//添加裁剪后的图片
|
//添加裁剪后的图片
|
||||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
||||||
let imgData = await this.groupToImg(elements,position,'clipPath')
|
let imgData = await this.groupToImg(elements,position,'clipPath')
|
||||||
let img = await this.createImage({minioUrl:imgData})
|
let img = await this.createImage({imgUrl:imgData})
|
||||||
img.set({
|
img.set({
|
||||||
scaleX:1,
|
scaleX:1,
|
||||||
scaleY:1,
|
scaleY:1,
|
||||||
@@ -750,7 +828,7 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
// 复制图层
|
// 复制图层
|
||||||
async copyLayer(id){
|
async copyLayer(id){
|
||||||
let createId = new Date().getTime()
|
// let createId = new Date().getTime()
|
||||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == id)
|
let elements = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == id)
|
||||||
for (let i = 0; i < elements.length; i++) {
|
for (let i = 0; i < elements.length; i++) {
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
@@ -763,69 +841,75 @@ class MyCanvas {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
await this.createLayer({id:createId})
|
// await this.createLayer({id:createId})
|
||||||
copyElements.forEach( item=>MyCanvas?.[this.id].add(item))
|
copyElements.forEach( item=>MyCanvas?.[this.id].add(item))
|
||||||
}
|
}
|
||||||
async setGroupGrid(str){//group变为图片
|
async setGroupGrid(str){//group变为图片
|
||||||
// MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
|
let dashed = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
|
||||||
|
if(this.layer.selectLayer.group.custom.groupType == 'Object' && !dashed)return
|
||||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
|
MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
|
||||||
if(str == 'all'){
|
return await new Promise(async (resolve, reject) => {
|
||||||
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
|
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
|
||||||
}
|
if(str == 'all'){
|
||||||
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
|
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
|
||||||
let scaleXY = {
|
|
||||||
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
|
|
||||||
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
|
|
||||||
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
|
|
||||||
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
|
|
||||||
}
|
|
||||||
let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
|
|
||||||
let img = await this.createImage({minioUrl:imgData})
|
|
||||||
elements.forEach((obj) =>{
|
|
||||||
if(obj.custom.isSelectable){
|
|
||||||
}else{
|
|
||||||
MyCanvas?.[this.id].remove(obj)
|
|
||||||
}
|
}
|
||||||
});
|
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
|
||||||
if(layerBg){
|
let scaleXY = {
|
||||||
layerBg.custom.state = ''
|
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
|
||||||
delete layerBg.eraser
|
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
|
||||||
layerBg.set({
|
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
|
||||||
scaleX:1,
|
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
|
||||||
scaleY:1,
|
}
|
||||||
width: scaleXY.width * scaleXY.scaleX,
|
let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
|
||||||
height: scaleXY.height * scaleXY.scaleY,
|
let img = await this.createImage({imgUrl:imgData})
|
||||||
clipPath:null,
|
elements.forEach((obj) =>{
|
||||||
fill: new fabric.Pattern({
|
if(obj.custom.isSelectable){
|
||||||
source: img.getElement(), // 传入图片元素
|
}else{
|
||||||
repeat: 'no-repeat' // 设置图片不重复
|
MyCanvas?.[this.id].remove(obj)
|
||||||
}),
|
}
|
||||||
hasBorders: true,
|
|
||||||
hasControls: true
|
|
||||||
})
|
|
||||||
this.setGroupStyle(layerBg)
|
|
||||||
}else{
|
|
||||||
const rect = new fabric.Rect({
|
|
||||||
// left:0,
|
|
||||||
// top:0,
|
|
||||||
width: MyCanvas?.[this.id].width,
|
|
||||||
height: MyCanvas?.[this.id].height,
|
|
||||||
strokeWidth:0,
|
|
||||||
fill: new fabric.Pattern({
|
|
||||||
source: img.getElement(), // 传入图片元素
|
|
||||||
repeat: 'no-repeat' // 设置图片不重复
|
|
||||||
}),
|
|
||||||
custom:{
|
|
||||||
isSelectable:true,
|
|
||||||
},
|
|
||||||
hasBorders: true,
|
|
||||||
hasControls: true
|
|
||||||
});
|
});
|
||||||
this.setGroupStyle(rect)
|
if(layerBg){
|
||||||
MyCanvas?.[this.id].add(rect)
|
layerBg.custom.state = ''
|
||||||
}
|
delete layerBg.eraser
|
||||||
MyCanvas?.[this.id].renderAll() // 刷新画布,改变group的visible属性,必须通过刷新画布,才能应用新属性值
|
layerBg.set({
|
||||||
|
scaleX:1,
|
||||||
|
scaleY:1,
|
||||||
|
width: scaleXY.width * scaleXY.scaleX,
|
||||||
|
height: scaleXY.height * scaleXY.scaleY,
|
||||||
|
clipPath:null,
|
||||||
|
fill: new fabric.Pattern({
|
||||||
|
source: img.getElement(), // 传入图片元素
|
||||||
|
repeat: 'no-repeat' // 设置图片不重复
|
||||||
|
}),
|
||||||
|
hasBorders: true,
|
||||||
|
hasControls: true
|
||||||
|
})
|
||||||
|
this.setGroupStyle(layerBg)
|
||||||
|
resolve('')
|
||||||
|
}else{
|
||||||
|
const rect = new fabric.Rect({
|
||||||
|
// left:0,
|
||||||
|
// top:0,
|
||||||
|
width: MyCanvas?.[this.id].width,
|
||||||
|
height: MyCanvas?.[this.id].height,
|
||||||
|
strokeWidth:0,
|
||||||
|
fill: new fabric.Pattern({
|
||||||
|
source: img.getElement(), // 传入图片元素
|
||||||
|
repeat: 'no-repeat' // 设置图片不重复
|
||||||
|
}),
|
||||||
|
custom:{
|
||||||
|
isSelectable:true,
|
||||||
|
},
|
||||||
|
hasBorders: true,
|
||||||
|
hasControls: true
|
||||||
|
});
|
||||||
|
this.setGroupStyle(rect)
|
||||||
|
MyCanvas?.[this.id].add(rect)
|
||||||
|
resolve('')
|
||||||
|
}
|
||||||
|
MyCanvas?.[this.id].renderAll() // 刷新画布,改变group的visible属性,必须通过刷新画布,才能应用新属性值
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
//液化
|
//液化
|
||||||
getLiquefactionImgObj(){
|
getLiquefactionImgObj(){
|
||||||
@@ -895,7 +979,7 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
}else if(liquefaction.type == 'layer'){
|
}else if(liquefaction.type == 'layer'){
|
||||||
let bg = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
|
let bg = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
|
||||||
let img = await this.createImage({minioUrl:data})
|
let img = await this.createImage({imgUrl:data})
|
||||||
bg.set({
|
bg.set({
|
||||||
fill: new fabric.Pattern({
|
fill: new fabric.Pattern({
|
||||||
source: img.getElement(), // 传入图片元素
|
source: img.getElement(), // 传入图片元素
|
||||||
@@ -948,12 +1032,38 @@ class MyCanvas {
|
|||||||
if(item.custom?.dashed && item._objects){
|
if(item.custom?.dashed && item._objects){
|
||||||
cloned._objects = cloned._objects.filter(item => item.type == 'image')
|
cloned._objects = cloned._objects.filter(item => item.type == 'image')
|
||||||
}
|
}
|
||||||
// if(type == 'setGrid'){
|
if(this.exportData.width != -1){
|
||||||
|
if (cloned.type !== 'image') {
|
||||||
|
cloned.set({
|
||||||
|
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
|
||||||
|
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
|
||||||
|
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1,
|
||||||
|
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 对图片对象单独处理:重新计算图片的缩放
|
||||||
|
cloned.set({
|
||||||
|
left: scaleXY?.scale?cloned.left * scaleXY?.scale:cloned.left - xy.x,
|
||||||
|
top: scaleXY?.scale?cloned.top * scaleXY?.scale:cloned.top - xy.y,
|
||||||
|
scaleX: cloned.scaleX * scaleXY?.scale?scaleXY?.scale:1, // 根据原有 scaleX 进行缩放
|
||||||
|
scaleY: cloned.scaleY * scaleXY?.scale?scaleXY?.scale:1 // 根据原有 scaleY 进行缩放
|
||||||
|
});
|
||||||
|
|
||||||
|
// 确保图片的尺寸缩放是基于原始宽高和当前缩放
|
||||||
|
var originalWidth = cloned.width * cloned.scaleX; // 原始宽度 * 当前缩放
|
||||||
|
var originalHeight = cloned.height * cloned.scaleY; // 原始高度 * 当前缩放
|
||||||
|
cloned.set({
|
||||||
|
width: originalWidth * scaleXY?.scale?scaleXY?.scale:1, // 调整后的宽度
|
||||||
|
height: originalHeight * scaleXY?.scale?scaleXY?.scale:1 // 调整后的高度
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}else{
|
||||||
cloned.set({
|
cloned.set({
|
||||||
left: cloned.left - xy.x,
|
left: (cloned.left - xy.x),
|
||||||
top: cloned.top - xy.y,
|
top: (cloned.top - xy.y),
|
||||||
})
|
})
|
||||||
// }
|
}
|
||||||
|
|
||||||
if(cloned.custom?.layerId != -1){
|
if(cloned.custom?.layerId != -1){
|
||||||
temporar.add(cloned)
|
temporar.add(cloned)
|
||||||
}
|
}
|
||||||
@@ -1108,6 +1218,8 @@ class MyCanvas {
|
|||||||
this.setPencilWidth()
|
this.setPencilWidth()
|
||||||
}
|
}
|
||||||
async addImage (imgData){
|
async addImage (imgData){
|
||||||
|
console.log(imgData)
|
||||||
|
if(!imgData.imgUrl)imgData.imgUrl = imgData.url
|
||||||
let img = await this.createImage(imgData)
|
let img = await this.createImage(imgData)
|
||||||
let position = {
|
let position = {
|
||||||
// left: 0,
|
// left: 0,
|
||||||
@@ -1122,17 +1234,18 @@ class MyCanvas {
|
|||||||
// minioUrl:getMinioUrl(imgData.url)
|
// minioUrl:getMinioUrl(imgData.url)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
if(this.dashed.isDetail)await this.createLayer({})
|
console.log(this.exportData.width)
|
||||||
|
if(this.exportData.width != -1)await this.createLayer({})
|
||||||
|
// if(this.dashed.isDetail)await this.createLayer({})
|
||||||
this.setCanvasImage(img,position,"upImgFiles",imgData)
|
this.setCanvasImage(img,position,"upImgFiles",imgData)
|
||||||
}
|
}
|
||||||
createImage(imgData){
|
createImage(imgData){
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
console.log(imgData)
|
fabric.Image.fromURL(imgData.imgUrl,(img) => {
|
||||||
fabric.Image.fromURL(imgData.minioUrl,(img) => {
|
|
||||||
img.set({
|
img.set({
|
||||||
hasControls: true,
|
hasControls: true,
|
||||||
})
|
})
|
||||||
img.minioUrl=getMinioUrl(imgData.minioUrl || imgData.imgUrl)
|
img.minioUrl=getMinioUrl(imgData.imgUrl || imgData.minioUrl)
|
||||||
resolve(img)
|
resolve(img)
|
||||||
},{ crossOrigin: "Anonymous" })
|
},{ crossOrigin: "Anonymous" })
|
||||||
})
|
})
|
||||||
@@ -1184,7 +1297,6 @@ class MyCanvas {
|
|||||||
if (key == "likeDesignCollectionList") {
|
if (key == "likeDesignCollectionList") {
|
||||||
imgUrl = data.designOutfitUrl;
|
imgUrl = data.designOutfitUrl;
|
||||||
}
|
}
|
||||||
console.log(img.width , img.height,img);
|
|
||||||
let imgWidth = await this.setImageWidth(key,img);
|
let imgWidth = await this.setImageWidth(key,img);
|
||||||
let proportion = img.height / img.width; //计算图形宽高比例
|
let proportion = img.height / img.width; //计算图形宽高比例
|
||||||
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
||||||
@@ -1278,11 +1390,47 @@ class MyCanvas {
|
|||||||
setCanvasWH = (str)=>{
|
setCanvasWH = (str)=>{
|
||||||
clearTimeout(this.setTimeOut.canvasWH)
|
clearTimeout(this.setTimeOut.canvasWH)
|
||||||
this.setTimeOut.canvasWH = setTimeout(()=>{
|
this.setTimeOut.canvasWH = setTimeout(()=>{
|
||||||
MyCanvas?.[this.id].setWidth(this.canvasWH.width);
|
// MyCanvas?.[this.id].setWidth(this.canvasWH.width);
|
||||||
MyCanvas?.[this.id].setHeight(this.canvasWH.height);
|
// MyCanvas?.[this.id].setHeight(this.canvasWH.height);
|
||||||
// MyCanvas?.[this.id].width = this.canvasWH.width
|
var allObjects = MyCanvas?.[this.id].getObjects();
|
||||||
// MyCanvas?.[this.id].height = this.canvasWH.height
|
|
||||||
this.initCanvasWH('updata')
|
allObjects.forEach((obj)=>{
|
||||||
|
if((obj?.custom?.type == 'layer' && obj.type == 'group')||(obj.type == 'rect' && obj.custom.isSelectable)){
|
||||||
|
if((obj?.custom?.type == 'layer' && obj.type == 'group')){
|
||||||
|
// if(obj.custom.layerId == this.layer.selectLayer.id){
|
||||||
|
obj.set({
|
||||||
|
// left: -MyCanvas?.[this.id].width / 2,
|
||||||
|
// top: -MyCanvas?.[this.id].height / 2,
|
||||||
|
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
|
||||||
|
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
|
||||||
|
width:this.canvasWH.layerWidth,
|
||||||
|
height:this.canvasWH.layerHeight,
|
||||||
|
})
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if(obj._objects.length > 1){
|
||||||
|
// obj._objects.forEach((item)=>{
|
||||||
|
// item.set({
|
||||||
|
// left: item.left + this.canvasWH.layerWidth / 2,
|
||||||
|
// top: item.top + this.canvasWH.layerHeight / 2,
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
}else{
|
||||||
|
obj.set({
|
||||||
|
left: MyCanvas?.[this.id].width / 2 - this.canvasWH.layerWidth / 2,
|
||||||
|
top: MyCanvas?.[this.id].height / 2 - this.canvasWH.layerHeight / 2,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
obj.set({
|
||||||
|
width:this.canvasWH.layerWidth,
|
||||||
|
height:this.canvasWH.layerHeight,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
MyCanvas?.[this.id].renderAll();
|
||||||
|
// this.initCanvasWH('updata')
|
||||||
|
this.updataLayer()
|
||||||
},1000)
|
},1000)
|
||||||
}
|
}
|
||||||
setColorHistory = (value)=>{
|
setColorHistory = (value)=>{
|
||||||
@@ -1411,7 +1559,48 @@ class MyCanvas {
|
|||||||
// });
|
// });
|
||||||
// })
|
// })
|
||||||
// }
|
// }
|
||||||
|
getBGRect(){
|
||||||
|
let rect
|
||||||
|
MyCanvas?.[this.id].getObjects().forEach((element)=>{
|
||||||
|
if(element?.custom?.type == 'layer' && element.type == 'group'){
|
||||||
|
element._objects.forEach((item)=>{
|
||||||
|
if(item?.custom?.isSelectable && item.type == 'rect'){
|
||||||
|
rect = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else if(element?.custom?.isSelectable && element.type == 'rect'){
|
||||||
|
rect = element
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return rect
|
||||||
|
}
|
||||||
|
async upDataRectBGImg(image){
|
||||||
|
let rect = this.getBGRect()
|
||||||
|
if(!rect)return
|
||||||
|
let img = await this.createImage({imgUrl:image})
|
||||||
|
const scaleX = this.canvasWH.layerWidth / img.width; // 横向比例
|
||||||
|
const scaleY = this.canvasWH.layerWidth / img.height; // 纵向比例
|
||||||
|
// 选择较大的比例来保持完整图片显示,避免裁剪
|
||||||
|
const scale = Math.min(scaleX, scaleY);
|
||||||
|
const patternTransform = [
|
||||||
|
scale, 0,
|
||||||
|
0, scale,
|
||||||
|
(this.canvasWH.layerWidth - img.width * scale) / 2,
|
||||||
|
(this.canvasWH.layerWidth - img.height * scale) / 2
|
||||||
|
];
|
||||||
|
rect.set({
|
||||||
|
fill: new fabric.Pattern({
|
||||||
|
source: img.getElement(), // 传入图片元素
|
||||||
|
repeat: 'no-repeat', // 设置图片不重复
|
||||||
|
patternTransform: patternTransform
|
||||||
|
// patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
rect.minioUrl = getMinioUrl(image)
|
||||||
|
MyCanvas?.[this.id].requestRenderAll()
|
||||||
|
}
|
||||||
createLayer(data){
|
createLayer(data){
|
||||||
|
|
||||||
let {str,id,editImg,noErasable} = data
|
let {str,id,editImg,noErasable} = data
|
||||||
let image = data.img
|
let image = data.img
|
||||||
let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
|
let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
|
||||||
@@ -1424,8 +1613,10 @@ class MyCanvas {
|
|||||||
top: -MyCanvas?.[this.id].height / 2,
|
top: -MyCanvas?.[this.id].height / 2,
|
||||||
// left:0,
|
// left:0,
|
||||||
// top:0,
|
// top:0,
|
||||||
width: MyCanvas?.[this.id].width,
|
// width: this.canvasWH.layerWidth,
|
||||||
height: MyCanvas?.[this.id].height,
|
// height: this.canvasWH.layerHeight,
|
||||||
|
width: this.canvasWH.width,
|
||||||
|
height: this.canvasWH.height,
|
||||||
strokeWidth:0,
|
strokeWidth:0,
|
||||||
fill:'#FFF',
|
fill:'#FFF',
|
||||||
custom:{
|
custom:{
|
||||||
@@ -1440,10 +1631,10 @@ class MyCanvas {
|
|||||||
rect.clipPath = cloned
|
rect.clipPath = cloned
|
||||||
})
|
})
|
||||||
const group = new fabric.Group([], {
|
const group = new fabric.Group([], {
|
||||||
width: MyCanvas?.[this.id].width,
|
width: this.canvasWH.width,
|
||||||
height: MyCanvas?.[this.id].height,
|
height: this.canvasWH.height,
|
||||||
left:0,
|
left:(this.canvasWH.width - this.canvasWH.layerWidth)/2,
|
||||||
top:0,
|
top:(this.canvasWH.height - this.canvasWH.layerHeight)/2,
|
||||||
erasable:false,
|
erasable:false,
|
||||||
subTargetCheck:true,
|
subTargetCheck:true,
|
||||||
evented:false,
|
evented:false,
|
||||||
@@ -1461,7 +1652,7 @@ class MyCanvas {
|
|||||||
if(str == 'init'){
|
if(str == 'init'){
|
||||||
group.moveTo(group.custom.selectLayerIndex)
|
group.moveTo(group.custom.selectLayerIndex)
|
||||||
if(image){
|
if(image){
|
||||||
let img = await this.createImage({minioUrl:image})
|
let img = await this.createImage({imgUrl:image})
|
||||||
const scaleX = group.width / img.width; // 横向比例
|
const scaleX = group.width / img.width; // 横向比例
|
||||||
const scaleY = group.height / img.height; // 纵向比例
|
const scaleY = group.height / img.height; // 纵向比例
|
||||||
// 选择较大的比例来保持完整图片显示,避免裁剪
|
// 选择较大的比例来保持完整图片显示,避免裁剪
|
||||||
@@ -1489,7 +1680,7 @@ class MyCanvas {
|
|||||||
})
|
})
|
||||||
}else if(editImg){
|
}else if(editImg){
|
||||||
group.moveTo(group.custom.selectLayerIndex)
|
group.moveTo(group.custom.selectLayerIndex)
|
||||||
let img = await this.createImage({minioUrl:editImg})
|
let img = await this.createImage({imgUrl:editImg})
|
||||||
rect.set({
|
rect.set({
|
||||||
fill: new fabric.Pattern({
|
fill: new fabric.Pattern({
|
||||||
source: img.getElement(), // 传入图片元素
|
source: img.getElement(), // 传入图片元素
|
||||||
@@ -1505,8 +1696,10 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
MyCanvas?.[this.id].add(group)
|
MyCanvas?.[this.id].add(group)
|
||||||
let img = group.toDataURL({
|
let img = group.toDataURL({
|
||||||
width: MyCanvas?.[this.id].width,
|
// width: this.canvasWH.layerWidth,
|
||||||
height: MyCanvas?.[this.id].height,
|
// height: this.canvasWH.layerHeight,
|
||||||
|
width: this.canvasWH.width,
|
||||||
|
height: this.canvasWH.height,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.layer.list.unshift({
|
this.layer.list.unshift({
|
||||||
@@ -1514,8 +1707,11 @@ class MyCanvas {
|
|||||||
id,img,isShow:true,
|
id,img,isShow:true,
|
||||||
groupType:'Object',
|
groupType:'Object',
|
||||||
index,})
|
index,})
|
||||||
await this.selectLayer(id)
|
if(this.layer.selectLayer.group && this.layer.selectLayer.group?.custom.groupType == 'Grid'){
|
||||||
|
await this.setGroupGrid('all')
|
||||||
|
}
|
||||||
MyCanvas?.[this.id].renderAll();
|
MyCanvas?.[this.id].renderAll();
|
||||||
|
await this.selectLayer(id)
|
||||||
this.updateCanvasState()
|
this.updateCanvasState()
|
||||||
resolve(group)
|
resolve(group)
|
||||||
})
|
})
|
||||||
@@ -1532,11 +1728,9 @@ class MyCanvas {
|
|||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
showBg(boolen){
|
showBg(boolen){
|
||||||
let Bg = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.type == 'init')?.[0];
|
let rect = this.getBGRect()
|
||||||
// MyCanvas?.[this.id].getObjects().forEach((item)=>{
|
if(!rect)return
|
||||||
// console.log(item)
|
rect.set({visible:boolen})
|
||||||
// })
|
|
||||||
Bg.set({visible:boolen})
|
|
||||||
// if(Bg.visible){
|
// if(Bg.visible){
|
||||||
// Bg.set({visible:false})
|
// Bg.set({visible:false})
|
||||||
// }else{
|
// }else{
|
||||||
@@ -1602,7 +1796,6 @@ class MyCanvas {
|
|||||||
options.target.clipPath = cloned
|
options.target.clipPath = cloned
|
||||||
})
|
})
|
||||||
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil' && this.dashed.isDetail ){
|
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil' && this.dashed.isDetail ){
|
||||||
console.log(123321)
|
|
||||||
let scale = 1
|
let scale = 1
|
||||||
if(options.target?.custom?.type == 'print')scale = 2
|
if(options.target?.custom?.type == 'print')scale = 2
|
||||||
options.target.set({
|
options.target.set({
|
||||||
@@ -1617,7 +1810,7 @@ class MyCanvas {
|
|||||||
//判断是否可以点击空白地方进行选中
|
//判断是否可以点击空白地方进行选中
|
||||||
if(options.target?.custom?.dashed){
|
if(options.target?.custom?.dashed){
|
||||||
this.dashed.isDashedShow = true
|
this.dashed.isDashedShow = true
|
||||||
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
|
options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false,selectable:true})
|
||||||
if(this.dashed.isDetail){//判断是裁剪还是局部添加
|
if(this.dashed.isDetail){//判断是裁剪还是局部添加
|
||||||
options.target.set({selectable:false,perPixelTargetFind:true})
|
options.target.set({selectable:false,perPixelTargetFind:true})
|
||||||
}else{
|
}else{
|
||||||
@@ -1647,7 +1840,7 @@ class MyCanvas {
|
|||||||
arr.forEach((item,index)=>{
|
arr.forEach((item,index)=>{
|
||||||
item.moveTo(index)
|
item.moveTo(index)
|
||||||
})
|
})
|
||||||
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
|
if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid' && this.clipPath.clipGroup && this.dashed.isDetail){
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
|
let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
|
||||||
let clipPathLect = this.clipPath.clipGroup.left
|
let clipPathLect = this.clipPath.clipGroup.left
|
||||||
@@ -1705,8 +1898,10 @@ class MyCanvas {
|
|||||||
return this.isAddToLayer(obj)
|
return this.isAddToLayer(obj)
|
||||||
});
|
});
|
||||||
const group = new fabric.Group([], {
|
const group = new fabric.Group([], {
|
||||||
width: this.layer.selectLayer.group.width,
|
// width: this.layer.selectLayer.group.width,
|
||||||
height: this.layer.selectLayer.group.height,
|
// height: this.layer.selectLayer.group.height,
|
||||||
|
width:this.canvasWH.layerWidth,
|
||||||
|
height:this.canvasWH.layerHeight,
|
||||||
erasable:false,
|
erasable:false,
|
||||||
selectable:false,
|
selectable:false,
|
||||||
});
|
});
|
||||||
@@ -1715,8 +1910,10 @@ class MyCanvas {
|
|||||||
let item = elements[i]
|
let item = elements[i]
|
||||||
item.clone((clonedObj)=>{
|
item.clone((clonedObj)=>{
|
||||||
this.setClone(item,clonedObj)
|
this.setClone(item,clonedObj)
|
||||||
clonedObj.left = clonedObj.left - this.layer.selectLayer.group.width/2
|
// clonedObj.height = this.layer.selectLayer.group.height
|
||||||
clonedObj.top = clonedObj.top - this.layer.selectLayer.group.height/2
|
// clonedObj.width = this.layer.selectLayer.group.width
|
||||||
|
clonedObj.left = clonedObj.left - this.canvasWH.width/2
|
||||||
|
clonedObj.top = clonedObj.top - this.canvasWH.height/2
|
||||||
if(clonedObj.custom?.dashed){
|
if(clonedObj.custom?.dashed){
|
||||||
let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
|
let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
|
||||||
clonedObj.remove(clipPath)
|
clonedObj.remove(clipPath)
|
||||||
@@ -1727,8 +1924,10 @@ class MyCanvas {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
|
this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
|
||||||
width: this.layer.selectLayer.group.width,
|
// left:this.canvasWH.width / 2 - this.canvasWH.layerWidth/2,
|
||||||
height: this.layer.selectLayer.group.height
|
// top:this.canvasWH.height / 2 - this.canvasWH.layerWidth/2,
|
||||||
|
width:this.canvasWH.layerWidth,
|
||||||
|
height:this.canvasWH.layerHeight,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
},500)
|
},500)
|
||||||
@@ -1763,7 +1962,7 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
async selectLayer(id){
|
async selectLayer(id){
|
||||||
await new Promise(async (resolve, reject) => {
|
await new Promise(async (resolve, reject) => {
|
||||||
if(this.layer.selectLayer.id != -1){
|
if(this.layer.selectLayer.id != -1 && this.layer.selectLayer.group){
|
||||||
await this.mergeGroup()
|
await this.mergeGroup()
|
||||||
}
|
}
|
||||||
let group = await this.lookingLayer(id,'setRubber')
|
let group = await this.lookingLayer(id,'setRubber')
|
||||||
@@ -1778,17 +1977,17 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
async mergeGroup(){
|
async mergeGroup(){
|
||||||
const elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
const elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
||||||
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
|
|
||||||
if(isClipPath.length>0)await this.setGroupGrid('all')
|
|
||||||
let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
|
let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
|
||||||
group.set({visible:true})
|
group.set({visible:true,evented:false})
|
||||||
for (let index = 0; index < elements.length; index++) {
|
for (let index = 0; index < elements.length; index++) {
|
||||||
const item = elements[index];
|
const item = elements[index];
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
item.clone((v)=>{
|
item.clone((v)=>{
|
||||||
this.setClone(item,v)
|
this.setClone(item,v)
|
||||||
v.left = v.left - group.width/2
|
// v.left = v.left - MyCanvas?.[this.id].width / 2
|
||||||
v.top = v.top - group.height/2
|
// v.top = v.top - MyCanvas?.[this.id].height / 2
|
||||||
|
v.left = v.left - (this.canvasWH.width - this.canvasWH.layerWidth)/2 - this.layer.selectLayer.group.width/2
|
||||||
|
v.top = v.top - (this.canvasWH.height - this.canvasWH.layerHeight)/2 - this.layer.selectLayer.group.height/2
|
||||||
if(v.custom?.dashed){
|
if(v.custom?.dashed){
|
||||||
// MyCanvas?.[this.id].remove(item)
|
// MyCanvas?.[this.id].remove(item)
|
||||||
// let img = v._objects.filter(item => item.type == 'image')[0]
|
// let img = v._objects.filter(item => item.type == 'image')[0]
|
||||||
@@ -1814,14 +2013,18 @@ class MyCanvas {
|
|||||||
async expandGroup(){
|
async expandGroup(){
|
||||||
const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
|
const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
|
||||||
// fabric.util.enlivenObjects(elements, (clonedObjects) => {
|
// fabric.util.enlivenObjects(elements, (clonedObjects) => {
|
||||||
this.layer.selectLayer.group.set({visible:false})
|
let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
|
||||||
|
if(isClipPath.length>0)await this.setGroupGrid('all')
|
||||||
|
this.layer.selectLayer.group.set({evented:true})
|
||||||
for (let index = 0; index < elements.length; index++) {
|
for (let index = 0; index < elements.length; index++) {
|
||||||
const item = elements[index];
|
const item = elements[index];
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
item.clone((v)=>{
|
item.clone((v)=>{
|
||||||
this.setClone(item,v)
|
this.setClone(item,v)
|
||||||
v.left = v.left + this.layer.selectLayer.group.width/2
|
// v.left = v.left + this.layer.selectLayer.group.width/2
|
||||||
v.top = v.top + this.layer.selectLayer.group.height/2
|
// v.top = v.top + this.layer.selectLayer.group.height/2
|
||||||
|
v.left = v.left + (this.canvasWH.width - this.canvasWH.layerWidth)/2 + this.layer.selectLayer.group.width/2
|
||||||
|
v.top = v.top + (this.canvasWH.height - this.canvasWH.layerHeight)/2 + this.layer.selectLayer.group.height/2
|
||||||
if(v.custom?.isSelectable && this.layer.selectLayer.group.custom.noErasable){
|
if(v.custom?.isSelectable && this.layer.selectLayer.group.custom.noErasable){
|
||||||
v.set({
|
v.set({
|
||||||
erasable:false
|
erasable:false
|
||||||
@@ -1841,6 +2044,7 @@ class MyCanvas {
|
|||||||
// MyCanvas?.[this.id].add(img)
|
// MyCanvas?.[this.id].add(img)
|
||||||
// }
|
// }
|
||||||
}else{
|
}else{
|
||||||
|
console.log(v,'add')
|
||||||
MyCanvas?.[this.id].add(v)
|
MyCanvas?.[this.id].add(v)
|
||||||
}
|
}
|
||||||
if(index == elements.length - 1){
|
if(index == elements.length - 1){
|
||||||
@@ -1928,7 +2132,7 @@ class MyCanvas {
|
|||||||
}else if(this.keyDown.indexOf('KeyI') > -1){
|
}else if(this.keyDown.indexOf('KeyI') > -1){
|
||||||
this.getColor()//吸色
|
this.getColor()//吸色
|
||||||
}else if(this.keyDown.indexOf('KeyM') > -1){
|
}else if(this.keyDown.indexOf('KeyM') > -1){
|
||||||
setOperation('move')
|
this.setOperation('move')
|
||||||
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
|
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
|
||||||
MyCanvas?.[this.id].discardActiveObject().renderAll();
|
MyCanvas?.[this.id].discardActiveObject().renderAll();
|
||||||
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
|
}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
|
||||||
@@ -2049,7 +2253,7 @@ class MyCanvas {
|
|||||||
}
|
}
|
||||||
let elements = MyCanvas[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
let elements = MyCanvas[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
||||||
let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
|
let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
|
||||||
let img = await this.createImage({minioUrl:imgData})
|
let img = await this.createImage({imgUrl:imgData})
|
||||||
// cloned._objects = cloned._objects.filter(item => item.type == 'image')
|
// cloned._objects = cloned._objects.filter(item => item.type == 'image')
|
||||||
let clipPathElement = cloned._objects.filter(obj => obj.type != 'image')[0]
|
let clipPathElement = cloned._objects.filter(obj => obj.type != 'image')[0]
|
||||||
|
|
||||||
@@ -2091,17 +2295,16 @@ class MyCanvas {
|
|||||||
|
|
||||||
this._clipboard = copyObj;
|
this._clipboard = copyObj;
|
||||||
}
|
}
|
||||||
async paste(){//粘贴
|
paste(){//粘贴
|
||||||
if(!this._clipboard){
|
if(!this._clipboard){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
await this.createLayer({})
|
this._clipboard.clone(async clonedObj => {
|
||||||
this._clipboard.clone(clonedObj => {
|
|
||||||
// this.setClone(this._clipboard,clonedObj)
|
|
||||||
MyCanvas?.[this.id].discardActiveObject() // 取消选择
|
MyCanvas?.[this.id].discardActiveObject() // 取消选择
|
||||||
clonedObj.set({
|
clonedObj.set({
|
||||||
selectable: true
|
selectable: true
|
||||||
})
|
})
|
||||||
|
if(this.exportData.width != -1)await this.createLayer({})
|
||||||
if (clonedObj.type === 'activeSelection') {
|
if (clonedObj.type === 'activeSelection') {
|
||||||
// 活动选择需要一个对画布的引用
|
// 活动选择需要一个对画布的引用
|
||||||
clonedObj.forEachObject((obj)=>{
|
clonedObj.forEachObject((obj)=>{
|
||||||
@@ -2111,7 +2314,6 @@ class MyCanvas {
|
|||||||
clonedObj.setCoords()
|
clonedObj.setCoords()
|
||||||
} else {
|
} else {
|
||||||
MyCanvas?.[this.id].add(clonedObj)
|
MyCanvas?.[this.id].add(clonedObj)
|
||||||
// this.layer.selectLayer.group.add(clonedObj)
|
|
||||||
}
|
}
|
||||||
MyCanvas?.[this.id].setActiveObject(clonedObj)
|
MyCanvas?.[this.id].setActiveObject(clonedObj)
|
||||||
MyCanvas?.[this.id].requestRenderAll()
|
MyCanvas?.[this.id].requestRenderAll()
|
||||||
@@ -2120,8 +2322,8 @@ class MyCanvas {
|
|||||||
this.updateCanvasState()
|
this.updateCanvasState()
|
||||||
}
|
}
|
||||||
isSelectable(obj){//判断元素是否允许选中
|
isSelectable(obj){//判断元素是否允许选中
|
||||||
if(this.dashed.isDetail){
|
if(!this.dashed.isDetail){
|
||||||
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && !obj.custom?.dashed)
|
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
|
||||||
}else{
|
}else{
|
||||||
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && (this.dashed.isDetail || !obj.custom?.dashed))
|
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && (this.dashed.isDetail || !obj.custom?.dashed))
|
||||||
}
|
}
|
||||||
@@ -2178,13 +2380,28 @@ class MyCanvas {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
setLoadFromJSON(data,fun){
|
setLoadFromJSON(data,fun){
|
||||||
MyCanvas?.[this.id].loadFromJSON(data.canvas, fun);
|
MyCanvas?.[this.id].loadFromJSON(data.canvas, async ()=>{
|
||||||
if(data.groupList.length == 0){
|
fun()
|
||||||
console.log(this.layer)
|
if(data.groupList.length == 0){
|
||||||
}else{
|
}else{
|
||||||
this.layer.list = data.groupList
|
data.groupList.sort((a, b) => a.index - b.index);
|
||||||
this.layer.selectLayer.id = data.groupList[0].id
|
data.groupList.forEach((item, i) => {
|
||||||
}
|
item.index = i + 1; // 从1开始
|
||||||
|
});
|
||||||
|
this.layer.currentIndex = data.groupList.length
|
||||||
|
this.layer.list = data.groupList
|
||||||
|
this.layer.selectLayer.id = data.groupList[0].id
|
||||||
|
await this.selectLayer(this.layer.list[this.layer.list.length-1].id)
|
||||||
|
let arr = MyCanvas?.[this.id].getObjects().sort((a, b) =>{
|
||||||
|
return a.custom.selectLayerIndex - b.custom.selectLayerIndex;
|
||||||
|
});
|
||||||
|
arr.forEach((item,index)=>{
|
||||||
|
item.moveTo(index)
|
||||||
|
})
|
||||||
|
this.addEvent()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
temporarilyExport(data){
|
temporarilyExport(data){
|
||||||
let scaleXY = {
|
let scaleXY = {
|
||||||
@@ -2220,16 +2437,33 @@ class MyCanvas {
|
|||||||
goal.erasable = obj.erasable
|
goal.erasable = obj.erasable
|
||||||
if(obj.minioUrl)goal.minioUrl = obj.minioUrl
|
if(obj.minioUrl)goal.minioUrl = obj.minioUrl
|
||||||
}
|
}
|
||||||
|
getElement(){
|
||||||
|
let list = []
|
||||||
|
if(MyCanvas?.[this.id]?.getObjects){
|
||||||
|
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}
|
||||||
//导出除了底图
|
//导出除了底图
|
||||||
async detailSubmit(){
|
async detailSubmit(){
|
||||||
return await new Promise(async (resolve, reject) => {
|
return await new Promise(async (resolve, reject) => {
|
||||||
let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
|
let list
|
||||||
|
if(this.exportData.width == -1){
|
||||||
|
list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type && obj.erasable);
|
||||||
|
}else{
|
||||||
|
list = MyCanvas?.[this.id].getObjects().filter(obj => !obj.custom.dashed && obj.type);
|
||||||
|
}
|
||||||
let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
|
let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
|
||||||
|
let canvasWidth = layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width
|
||||||
|
let canvasHeight = layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height
|
||||||
|
let exportWidth = this.exportData.width == -1?canvasWidth:this.exportData.width
|
||||||
|
let exportHeight = canvasHeight / canvasWidth * exportWidth
|
||||||
let scaleXY = {
|
let scaleXY = {
|
||||||
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
|
scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
|
||||||
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
|
scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
|
||||||
width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
|
width:exportWidth,
|
||||||
height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
|
height:exportHeight,
|
||||||
|
scale:exportWidth / canvasWidth,
|
||||||
}
|
}
|
||||||
let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
|
let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
|
||||||
resolve(imgData)
|
resolve(imgData)
|
||||||
|
|||||||
@@ -118,6 +118,7 @@ axios.interceptors.response.use((res) =>{
|
|||||||
}
|
}
|
||||||
message.warning('Please login and try again~')
|
message.warning('Please login and try again~')
|
||||||
store.commit('createDetail')
|
store.commit('createDetail')
|
||||||
|
store.commit('createProbject')
|
||||||
setTimeout(()=>[
|
setTimeout(()=>[
|
||||||
isLoginTime = false
|
isLoginTime = false
|
||||||
],2000)
|
],2000)
|
||||||
@@ -232,6 +233,7 @@ export const Https = {
|
|||||||
getModuleContent:`/api/project/getModuleContent`,//获取模块内容
|
getModuleContent:`/api/project/getModuleContent`,//获取模块内容
|
||||||
saveModuleContent:`/api/project/saveModuleContent`,//储存模块内容
|
saveModuleContent:`/api/project/saveModuleContent`,//储存模块内容
|
||||||
historyProject:`/api/project/page`,//项目记录
|
historyProject:`/api/project/page`,//项目记录
|
||||||
|
projectDetail:`/api/project/delete`,//删除项目
|
||||||
//3d
|
//3d
|
||||||
threeDPage:`/api/project/threeDPage`,
|
threeDPage:`/api/project/threeDPage`,
|
||||||
downloadZip:`/api/project/downloadZip`,//下载zip
|
downloadZip:`/api/project/downloadZip`,//下载zip
|
||||||
@@ -241,7 +243,11 @@ export const Https = {
|
|||||||
selectHistoryProject:`/api/project/choose`,//选择项目
|
selectHistoryProject:`/api/project/choose`,//选择项目
|
||||||
getMannequinDetail:`/api/project/getMannequinDetail`,//模块化查看模特点位
|
getMannequinDetail:`/api/project/getMannequinDetail`,//模块化查看模特点位
|
||||||
modifyProportion:`/api/generate/modifyProportion`,//模特拉伸
|
modifyProportion:`/api/generate/modifyProportion`,//模特拉伸
|
||||||
|
addSysModelToLib:`/api/library/addSysModelToLib`,
|
||||||
poselikeOrDisike:`/api/generate/likeOrDislike`,//postTransform like
|
poselikeOrDisike:`/api/generate/likeOrDislike`,//postTransform like
|
||||||
|
getAllPose:`/api/generate/getAllPose`,//获取动作
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//拼贴
|
//拼贴
|
||||||
genSketchRecon:`/api/generate/genSketchRecon`,
|
genSketchRecon:`/api/generate/genSketchRecon`,
|
||||||
@@ -365,11 +371,12 @@ export const Https = {
|
|||||||
brandLogoUpload:`/api/history/brandLogoUpload`,//上传bradDNA
|
brandLogoUpload:`/api/history/brandLogoUpload`,//上传bradDNA
|
||||||
brandDNAGenerate:`/api/history/brandDNAGenerate`,//上传bradDNA
|
brandDNAGenerate:`/api/history/brandDNAGenerate`,//上传bradDNA
|
||||||
brandDNAUpload:`/api/history/brandDNAUpload`,//上传DNA图片
|
brandDNAUpload:`/api/history/brandDNAUpload`,//上传DNA图片
|
||||||
|
getInitializeProgress:`/api/history/getInitializeProgress`,//获取brand进度
|
||||||
|
brandDNADelete:`/api/history/brandDNADelete`,//删除brandDna
|
||||||
|
|
||||||
|
|
||||||
brandDNAPage:`/api/history/brandDNAPage`,//brand列表
|
brandDNAPage:`/api/history/brandDNAPage`,//brand列表
|
||||||
brandDNASaveOrUpdate:`/api/history/brandDNASaveOrUpdate`,//提交个人信息
|
brandDNASaveOrUpdate:`/api/history/brandDNASaveOrUpdate`,//提交个人信息
|
||||||
|
productImageInitialize:`/api/history/productImageInitialize`,//产品识别
|
||||||
//调查问卷
|
//调查问卷
|
||||||
questionnaire:`/api/account/questionnaire`,//保存画布
|
questionnaire:`/api/account/questionnaire`,//保存画布
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,72 @@
|
|||||||
const projectList = {
|
const projectList = {
|
||||||
|
all:[
|
||||||
|
{
|
||||||
|
icon:'fi fi-rr-grid',
|
||||||
|
value:'moodBoard',
|
||||||
|
name:'Moodboard',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rs-objects-column',
|
||||||
|
value:'printBoard',
|
||||||
|
name:'Printboard',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rr-palette',
|
||||||
|
value:'colorBoard',
|
||||||
|
name:'Colorboard',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',
|
||||||
|
value:'sketchBoard',
|
||||||
|
name:'Sketchboard',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rs-people',
|
||||||
|
value:'mannequin',
|
||||||
|
name:'Mannequin',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rs-paintbrush-pencil',
|
||||||
|
value:'design',
|
||||||
|
name:'Design',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-ss-box-open',
|
||||||
|
value:'toProduct',
|
||||||
|
name:'To Product Image',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-br-keyboard-brightness',
|
||||||
|
value:'relight',
|
||||||
|
name:'Relight',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rr-play-alt',
|
||||||
|
value:'poseTransfer',
|
||||||
|
name:'Transfer Pose',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'i class="fi fi-rr-puzzle-alt',
|
||||||
|
value:'deReconstruction',
|
||||||
|
name:'De/Reconstruction',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rr-model-cube',
|
||||||
|
value:'patternMaking3D',
|
||||||
|
name:'3D Pattern Making',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rr-play-alt',
|
||||||
|
value:'poseTransfer',
|
||||||
|
name:'Transfer Pose',
|
||||||
|
task:'false',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rr-pen-swirl',
|
||||||
|
value:'canvas',
|
||||||
|
name:'Canvas',
|
||||||
|
task:'false',
|
||||||
|
},
|
||||||
|
],
|
||||||
seriesDesign:[
|
seriesDesign:[
|
||||||
{
|
{
|
||||||
icon:'fi fi-rr-grid',
|
icon:'fi fi-rr-grid',
|
||||||
@@ -33,7 +101,7 @@ const projectList = {
|
|||||||
},{
|
},{
|
||||||
icon:'fi fi-ss-box-open',
|
icon:'fi fi-ss-box-open',
|
||||||
value:'toProduct',
|
value:'toProduct',
|
||||||
name:'To Product',
|
name:'To Product Image',
|
||||||
task:'3-1',
|
task:'3-1',
|
||||||
},{
|
},{
|
||||||
icon:'fi fi-br-keyboard-brightness',
|
icon:'fi fi-br-keyboard-brightness',
|
||||||
@@ -81,7 +149,7 @@ const projectList = {
|
|||||||
},{
|
},{
|
||||||
icon:'fi fi-ss-box-open',
|
icon:'fi fi-ss-box-open',
|
||||||
value:'toProduct',
|
value:'toProduct',
|
||||||
name:'To Product',
|
name:'To Product Image',
|
||||||
task:'3-1',
|
task:'3-1',
|
||||||
},{
|
},{
|
||||||
icon:'fi fi-br-keyboard-brightness',
|
icon:'fi fi-br-keyboard-brightness',
|
||||||
@@ -112,7 +180,7 @@ const projectList = {
|
|||||||
{
|
{
|
||||||
icon:'fi fi-ss-box-open',
|
icon:'fi fi-ss-box-open',
|
||||||
value:'toProduct',
|
value:'toProduct',
|
||||||
name:'To Product',
|
name:'To Product Image',
|
||||||
task:'1-1',
|
task:'1-1',
|
||||||
},{
|
},{
|
||||||
icon:'fi fi-br-keyboard-brightness',
|
icon:'fi fi-br-keyboard-brightness',
|
||||||
@@ -133,7 +201,7 @@ const projectList = {
|
|||||||
],
|
],
|
||||||
printingDesign3D:[
|
printingDesign3D:[
|
||||||
{
|
{
|
||||||
icon:'fi fi-rr-model-cube',
|
icon:'fi fi-rr-cubes',
|
||||||
value:'patternMaking3D',
|
value:'patternMaking3D',
|
||||||
name:'3D Pattern Making',
|
name:'3D Pattern Making',
|
||||||
task:'1-1',
|
task:'1-1',
|
||||||
@@ -150,6 +218,11 @@ const projectList = {
|
|||||||
value:'sketchBoard',
|
value:'sketchBoard',
|
||||||
name:'Sketchboard',
|
name:'Sketchboard',
|
||||||
task:'1-1',
|
task:'1-1',
|
||||||
|
},{
|
||||||
|
icon:'fi fi-rs-people',
|
||||||
|
value:'mannequin',
|
||||||
|
name:'Mannequin',
|
||||||
|
task:'1-2',
|
||||||
},{
|
},{
|
||||||
icon:'i class="fi fi-rr-puzzle-alt',
|
icon:'i class="fi fi-rr-puzzle-alt',
|
||||||
value:'deReconstruction',
|
value:'deReconstruction',
|
||||||
|
|||||||
@@ -495,6 +495,7 @@ export default defineComponent({
|
|||||||
this.$router.replace("/");
|
this.$router.replace("/");
|
||||||
}
|
}
|
||||||
this.store.commit('createDetail')
|
this.store.commit('createDetail')
|
||||||
|
store.commit('createProbject')
|
||||||
|
|
||||||
// WriteCookie("token");
|
// WriteCookie("token");
|
||||||
clonAllCookie()
|
clonAllCookie()
|
||||||
|
|||||||
@@ -105,6 +105,7 @@ export default defineComponent({
|
|||||||
userId: userInfo?.userId,
|
userId: userInfo?.userId,
|
||||||
};
|
};
|
||||||
store.commit('createDetail')
|
store.commit('createDetail')
|
||||||
|
store.commit('createProbject')
|
||||||
if(!data.userId) return
|
if(!data.userId) return
|
||||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||||
clonAllCookie();
|
clonAllCookie();
|
||||||
|
|||||||
@@ -294,11 +294,12 @@ export default defineComponent({
|
|||||||
|
|
||||||
//删除分组
|
//删除分组
|
||||||
deleteGroup(record:any,index:number){
|
deleteGroup(record:any,index:number){
|
||||||
|
console.log(record)
|
||||||
let deleteGroupFun = (id:any,index:number) =>{
|
let deleteGroupFun = (id:any,index:number) =>{
|
||||||
let data = {
|
let data = {
|
||||||
userGroupId:id
|
projectId:id
|
||||||
}
|
}
|
||||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:data}).then(
|
||||||
(rv: any) => {
|
(rv: any) => {
|
||||||
message.success(this.t('HistoryPage.jsContent1'))
|
message.success(this.t('HistoryPage.jsContent1'))
|
||||||
this.collectionList.splice(index,1)
|
this.collectionList.splice(index,1)
|
||||||
@@ -306,8 +307,10 @@ export default defineComponent({
|
|||||||
// return
|
// return
|
||||||
// });
|
// });
|
||||||
if(record.id == this.store.state.HomeStoreModule.userGroupId){
|
if(record.id == this.store.state.HomeStoreModule.userGroupId){
|
||||||
this.store.commit('deleteUserGroupId')
|
// this.store.commit('deleteUserGroupId')
|
||||||
this.store.commit("setLikeDesignCollectionList", []);
|
this.store.commit("setLikeDesignCollectionList", []);
|
||||||
|
this.store.commit('createProbject')
|
||||||
|
|
||||||
this.store.commit("clearAllData");
|
this.store.commit("clearAllData");
|
||||||
this.store.commit("clearAllCollection");
|
this.store.commit("clearAllCollection");
|
||||||
this.store.commit("setAllBoardDataChoose",{});
|
this.store.commit("setAllBoardDataChoose",{});
|
||||||
@@ -340,6 +343,7 @@ export default defineComponent({
|
|||||||
if(record.original == 0){
|
if(record.original == 0){
|
||||||
num = false
|
num = false
|
||||||
}
|
}
|
||||||
|
this.store.commit('createProbject')
|
||||||
this.$router.push({name:'homePage',params: {id:record.id,type:'History'}})
|
this.$router.push({name:'homePage',params: {id:record.id,type:'History'}})
|
||||||
this.store.commit('setChooseIsDesign',num)
|
this.store.commit('setChooseIsDesign',num)
|
||||||
|
|
||||||
|
|||||||
@@ -237,11 +237,12 @@
|
|||||||
<!-- 蒙层 end-->
|
<!-- 蒙层 end-->
|
||||||
<div v-show="selectCode == 'MyBrand'" class="right_content_body">
|
<div v-show="selectCode == 'MyBrand'" class="right_content_body">
|
||||||
<div v-show="!isBrandDetail" class="list">
|
<div v-show="!isBrandDetail" class="list">
|
||||||
<div class="addBrand gallery_btn" @click="addBrand">Add brand</div>
|
<div class="addBrand gallery_btn" style="padding:0 2.5rem;" @click="addBrand">Add brand</div>
|
||||||
<div class="content_body_table scroll_style">
|
<div class="content_body_table scroll_style">
|
||||||
<div class="myBrandItem content_img_item" v-for="item in brandDNAList" :key="item.id" @click="openBrandDetail(item)">
|
<div class="myBrandItem content_img_item" v-for="item,index in brandDNAList" :key="item.id" @click="openBrandDetail(item)">
|
||||||
<img :src="item.minioUrl" alt="">
|
<img :src="item.minioUrl" alt="">
|
||||||
<div class="bg"></div>
|
<div class="bg"></div>
|
||||||
|
<i class="fi fi-rr-trash icon_delete" @click.stop="deleteBrand(item,index)"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="no_data_block" v-show="!brandDNAList.length && !isShowMark">
|
<div class="no_data_block" v-show="!brandDNAList.length && !isShowMark">
|
||||||
<img src="@/assets/images/homePage/null_img.png">
|
<img src="@/assets/images/homePage/null_img.png">
|
||||||
@@ -258,7 +259,7 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<brandDetail v-show="isBrandDetail" v-model:isShowMark="isShowMark" ref="brandDetail" @handleBack="()=>isBrandDetail = false"></brandDetail>
|
<brandDetail v-show="isBrandDetail" v-model:isShowMark="isShowMark" :selectCode="selectCode" ref="brandDetail" @handleBack="()=>isBrandDetail = false"></brandDetail>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
|
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
|
||||||
@@ -795,6 +796,7 @@ export default defineComponent({
|
|||||||
const addBrand = ()=>{
|
const addBrand = ()=>{
|
||||||
dataDom.createBrand.openAddBrand()
|
dataDom.createBrand.openAddBrand()
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.getLangIsShowMark, // 这里使用了一个 getter 函数
|
() => props.getLangIsShowMark, // 这里使用了一个 getter 函数
|
||||||
(newValue, oldValue) => {
|
(newValue, oldValue) => {
|
||||||
@@ -1822,7 +1824,28 @@ export default defineComponent({
|
|||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
deleteBrand(item:any,index:any){
|
||||||
|
let this_ = this
|
||||||
|
Modal.confirm({
|
||||||
|
title: this.t('LibraryPage.jsContent11'),
|
||||||
|
icon: createVNode(ExclamationCircleOutlined),
|
||||||
|
okText: 'Yes',
|
||||||
|
cancelText: 'No',
|
||||||
|
mask:false,
|
||||||
|
centered:true,
|
||||||
|
onOk() {
|
||||||
|
let data = {
|
||||||
|
id:item.id,
|
||||||
|
}
|
||||||
|
Https.axiosPost(Https.httpUrls.brandDNADelete, data).then(
|
||||||
|
(rv) => {
|
||||||
|
this_.brandDNAList.splice(index,1)
|
||||||
|
}
|
||||||
|
).catch(res=>{
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -2025,7 +2048,7 @@ export default defineComponent({
|
|||||||
.right_content_body{
|
.right_content_body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #f6f5fa;
|
background: #f7f8fa;
|
||||||
padding: 2rem 4rem;
|
padding: 2rem 4rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -2149,11 +2172,11 @@ export default defineComponent({
|
|||||||
width: calc(100% / 5 - 1rem);
|
width: calc(100% / 5 - 1rem);
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
border-radius: 2rem;
|
border-radius: 2rem;
|
||||||
border: 2px solid #000;
|
// border: 2px solid #000;
|
||||||
position: relative;
|
position: relative;
|
||||||
aspect-ratio: 1 / .566;
|
aspect-ratio: 1 / .566;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
> img{
|
> img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -2167,10 +2190,24 @@ export default defineComponent({
|
|||||||
background: rgba(0,0,0,0);
|
background: rgba(0,0,0,0);
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
}
|
}
|
||||||
|
i{
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
font-size: 3rem;
|
||||||
|
display: none;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
&:hover{
|
&:hover{
|
||||||
> .bg{
|
> .bg{
|
||||||
background: rgba(0,0,0,0.2);
|
background: rgba(0,0,0,0.2);
|
||||||
}
|
}
|
||||||
|
> i{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.content_img_item_block{
|
.content_img_item_block{
|
||||||
|
|||||||
@@ -77,6 +77,7 @@ export default defineComponent({
|
|||||||
userId: userInfo?.userId,
|
userId: userInfo?.userId,
|
||||||
};
|
};
|
||||||
store.commit('createDetail')
|
store.commit('createDetail')
|
||||||
|
store.commit('createProbject')
|
||||||
if(!data.userId) return
|
if(!data.userId) return
|
||||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||||
clonAllCookie();
|
clonAllCookie();
|
||||||
|
|||||||
@@ -20,11 +20,12 @@
|
|||||||
"types": [
|
"types": [
|
||||||
"webpack-env"
|
"webpack-env"
|
||||||
],
|
],
|
||||||
"paths": {
|
"paths": {
|
||||||
"@/*": [
|
"@/*": [
|
||||||
"src/*"
|
"src/*"
|
||||||
]
|
],
|
||||||
},
|
"three/ *": ["three/addons/postprocessing/*"]
|
||||||
|
},
|
||||||
"lib": [
|
"lib": [
|
||||||
"esnext",
|
"esnext",
|
||||||
"dom",
|
"dom",
|
||||||
|
|||||||
Reference in New Issue
Block a user