fix
This commit is contained in:
X1627315083
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;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item > input {
|
||||
height: 2.5rem !important;
|
||||
height: 6rem !important;
|
||||
padding: 1rem !important;
|
||||
border-radius: 1rem;
|
||||
padding: calc(2rem - 1px * 2) !important;
|
||||
box-sizing: content-box;
|
||||
box-sizing: border-box;
|
||||
background-color: #f3f3f3;
|
||||
background-color: #fff;
|
||||
width: calc(100% - 4rem);
|
||||
width: 25rem;
|
||||
font-size: 1.8rem;
|
||||
transition: all 0.3s;
|
||||
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);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item .ant-select-selector {
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.generalModel_state .generalModel_state_item .ant-picker-input > input {
|
||||
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 {
|
||||
padding: 2.5rem 3rem;
|
||||
}
|
||||
.generalModel.fullScreen .generalModel_btn .generalModel_closeIcon {
|
||||
transform: translate(-100%, 100%);
|
||||
}
|
||||
.generalModel .ant-modal-content {
|
||||
border-radius: 3rem;
|
||||
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;
|
||||
top: 6rem;
|
||||
}
|
||||
.ant-modal-confirm-btns .ant-btn:hover {
|
||||
color: #fff !important;
|
||||
border-color: #39215b !important;
|
||||
}
|
||||
.ant-modal-confirm-btns .ant-btn-primary {
|
||||
background: #39215b !important;
|
||||
border-color: #39215b !important;
|
||||
}
|
||||
.ant-modal-confirm-btns .ant-btn-primary:hover {
|
||||
color: #fff !important;
|
||||
border-color: #543087 !important;
|
||||
background: #543087 !important;
|
||||
background: #000 !important;
|
||||
border-color: #000 !important;
|
||||
}
|
||||
.ant-spin-dot-item {
|
||||
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 {
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
color: #000;
|
||||
}
|
||||
.upload_item .upload_file_item.upload_file_item:last-child {
|
||||
@@ -1680,6 +1672,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border,
|
||||
.library_page .input_border,
|
||||
.productImg_content .input_border,
|
||||
.poseTransfer .input_border,
|
||||
.scaleImage_modal .input_border,
|
||||
.accountEdit_page .input_border,
|
||||
.generalMenu_printModel_upload .input_border,
|
||||
@@ -1696,6 +1689,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .input_box,
|
||||
.library_page .input_border .input_box,
|
||||
.productImg_content .input_border .input_box,
|
||||
.poseTransfer .input_border .input_box,
|
||||
.scaleImage_modal .input_border .input_box,
|
||||
.accountEdit_page .input_border .input_box,
|
||||
.generalMenu_printModel_upload .input_border .input_box,
|
||||
@@ -1706,11 +1700,13 @@ textarea:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box .inputShowText,
|
||||
.design_detail_modal_component .input_border .input_box .inputShowText,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.collection_modal_body .input_border .input_box.active textarea,
|
||||
.design_detail_modal_component .input_border .input_box.active textarea,
|
||||
.library_page .input_border .input_box.active textarea,
|
||||
.productImg_content .input_border .input_box.active textarea,
|
||||
.scaleImage_modal .input_border .input_box.active textarea,
|
||||
.accountEdit_page .input_border .input_box.active textarea,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active textarea,
|
||||
.generate .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 .search_textarea,
|
||||
.library_page .input_border .input_box.active .search_textarea,
|
||||
.productImg_content .input_border .input_box.active .search_textarea,
|
||||
.poseTransfer .input_border .input_box.active .search_textarea,
|
||||
.scaleImage_modal .input_border .input_box.active .search_textarea,
|
||||
.accountEdit_page .input_border .input_box.active .search_textarea,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active .search_textarea,
|
||||
.generate .input_border .input_box.active .search_textarea {
|
||||
border: 1px solid #ff0001;
|
||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
.collection_modal_body .input_border .input_box.active span,
|
||||
.design_detail_modal_component .input_border .input_box.active span,
|
||||
.library_page .input_border .input_box.active span,
|
||||
.productImg_content .input_border .input_box.active span,
|
||||
.scaleImage_modal .input_border .input_box.active span,
|
||||
.accountEdit_page .input_border .input_box.active span,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active span,
|
||||
.generate .input_border .input_box.active span {
|
||||
.collection_modal_body .input_border .input_box.active .inputShowText,
|
||||
.design_detail_modal_component .input_border .input_box.active .inputShowText,
|
||||
.library_page .input_border .input_box.active .inputShowText,
|
||||
.productImg_content .input_border .input_box.active .inputShowText,
|
||||
.poseTransfer .input_border .input_box.active .inputShowText,
|
||||
.scaleImage_modal .input_border .input_box.active .inputShowText,
|
||||
.accountEdit_page .input_border .input_box.active .inputShowText,
|
||||
.generalMenu_printModel_upload .input_border .input_box.active .inputShowText,
|
||||
.generate .input_border .input_box.active .inputShowText {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
color: rgba(255, 0, 0.7);
|
||||
@@ -1753,6 +1752,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .search_keyword,
|
||||
.library_page .input_border .search_keyword,
|
||||
.productImg_content .input_border .search_keyword,
|
||||
.poseTransfer .input_border .search_keyword,
|
||||
.scaleImage_modal .input_border .search_keyword,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.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,
|
||||
.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,
|
||||
.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,
|
||||
@@ -1797,6 +1799,7 @@ textarea:focus {
|
||||
.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,
|
||||
.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,
|
||||
.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,
|
||||
@@ -1815,6 +1818,7 @@ textarea:focus {
|
||||
.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,
|
||||
.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,
|
||||
.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,
|
||||
@@ -1825,6 +1829,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .input_box_btnBox,
|
||||
.library_page .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,
|
||||
.accountEdit_page .input_border .input_box_btnBox,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox,
|
||||
@@ -1838,21 +1843,43 @@ textarea:focus {
|
||||
padding: 1.5rem 2rem;
|
||||
padding-right: 0;
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
.collection_modal_body .input_border .input_box_btnBox.sketch,
|
||||
.design_detail_modal_component .input_border .input_box_btnBox.sketch,
|
||||
.library_page .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,
|
||||
.accountEdit_page .input_border .input_box_btnBox.sketch,
|
||||
.generalMenu_printModel_upload .input_border .input_box_btnBox.sketch,
|
||||
.generate .input_border .input_box_btnBox.sketch {
|
||||
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,
|
||||
.design_detail_modal_component .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,
|
||||
.poseTransfer .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,
|
||||
.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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.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,
|
||||
@@ -1897,13 +1927,14 @@ textarea:focus {
|
||||
transform: translateY(-50%);
|
||||
height: 5.7rem;
|
||||
width: 5.7rem;
|
||||
border-radius: 50%;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.collection_modal_body .input_border input,
|
||||
.design_detail_modal_component .input_border input,
|
||||
.library_page .input_border input,
|
||||
.productImg_content .input_border input,
|
||||
.poseTransfer .input_border input,
|
||||
.scaleImage_modal .input_border input,
|
||||
.accountEdit_page .input_border input,
|
||||
.generalMenu_printModel_upload .input_border input,
|
||||
@@ -1921,6 +1952,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border inputinput:-moz-placeholder,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border input.forbidden,
|
||||
.productImg_content .input_border input.forbidden,
|
||||
.poseTransfer .input_border input.forbidden,
|
||||
.scaleImage_modal .input_border input.forbidden,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .fi,
|
||||
.productImg_content .input_border .fi,
|
||||
.poseTransfer .input_border .fi,
|
||||
.scaleImage_modal .input_border .fi,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .fi.active,
|
||||
.productImg_content .input_border .fi.active,
|
||||
.poseTransfer .input_border .fi.active,
|
||||
.scaleImage_modal .input_border .fi.active,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .fi.forbidden,
|
||||
.productImg_content .input_border .fi.forbidden,
|
||||
.poseTransfer .input_border .fi.forbidden,
|
||||
.scaleImage_modal .input_border .fi.forbidden,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .search_upImg,
|
||||
.productImg_content .input_border .search_upImg,
|
||||
.poseTransfer .input_border .search_upImg,
|
||||
.scaleImage_modal .input_border .search_upImg,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .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,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .search_textarea,
|
||||
.productImg_content .input_border .search_textarea,
|
||||
.poseTransfer .input_border .search_textarea,
|
||||
.scaleImage_modal .input_border .search_textarea,
|
||||
.accountEdit_page .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,
|
||||
.library_page .input_border .generage_btn_box,
|
||||
.productImg_content .input_border .generage_btn_box,
|
||||
.poseTransfer .input_border .generage_btn_box,
|
||||
.scaleImage_modal .input_border .generage_btn_box,
|
||||
.accountEdit_page .input_border .generage_btn_box,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box,
|
||||
@@ -2085,10 +2130,22 @@ textarea:focus {
|
||||
display: flex;
|
||||
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,
|
||||
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala,
|
||||
.library_page .input_border .generage_btn_box .icon-xiala,
|
||||
.productImg_content .input_border .generage_btn_box .icon-xiala,
|
||||
.poseTransfer .input_border .generage_btn_box .icon-xiala,
|
||||
.scaleImage_modal .input_border .generage_btn_box .icon-xiala,
|
||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala,
|
||||
@@ -2101,6 +2158,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .generage_btn_box .icon-xiala.active,
|
||||
.library_page .input_border .generage_btn_box .icon-xiala.active,
|
||||
.productImg_content .input_border .generage_btn_box .icon-xiala.active,
|
||||
.poseTransfer .input_border .generage_btn_box .icon-xiala.active,
|
||||
.scaleImage_modal .input_border .generage_btn_box .icon-xiala.active,
|
||||
.accountEdit_page .input_border .generage_btn_box .icon-xiala.active,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .icon-xiala.active,
|
||||
@@ -2111,6 +2169,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .generage_btn_box .content,
|
||||
.library_page .input_border .generage_btn_box .content,
|
||||
.productImg_content .input_border .generage_btn_box .content,
|
||||
.poseTransfer .input_border .generage_btn_box .content,
|
||||
.scaleImage_modal .input_border .generage_btn_box .content,
|
||||
.accountEdit_page .input_border .generage_btn_box .content,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content,
|
||||
@@ -2118,17 +2177,19 @@ textarea:focus {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
left: 2rem;
|
||||
left: 0rem;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin-top: 0.2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.collection_modal_body .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,
|
||||
.productImg_content .input_border .generage_btn_box .content > div,
|
||||
.poseTransfer .input_border .generage_btn_box .content > div,
|
||||
.scaleImage_modal .input_border .generage_btn_box .content > div,
|
||||
.accountEdit_page .input_border .generage_btn_box .content > div,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div,
|
||||
@@ -2141,10 +2202,22 @@ textarea:focus {
|
||||
overflow: hidden;
|
||||
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,
|
||||
.design_detail_modal_component .input_border .generage_btn_box .content > div:hover,
|
||||
.library_page .input_border .generage_btn_box .content > div:hover,
|
||||
.productImg_content .input_border .generage_btn_box .content > div:hover,
|
||||
.poseTransfer .input_border .generage_btn_box .content > div:hover,
|
||||
.scaleImage_modal .input_border .generage_btn_box .content > div:hover,
|
||||
.accountEdit_page .input_border .generage_btn_box .content > div:hover,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn_box .content > div:hover,
|
||||
@@ -2155,6 +2228,7 @@ textarea:focus {
|
||||
.design_detail_modal_component .input_border .generage_btn,
|
||||
.library_page .input_border .generage_btn,
|
||||
.productImg_content .input_border .generage_btn,
|
||||
.poseTransfer .input_border .generage_btn,
|
||||
.scaleImage_modal .input_border .generage_btn,
|
||||
.accountEdit_page .input_border .generage_btn,
|
||||
.generalMenu_printModel_upload .input_border .generage_btn,
|
||||
@@ -2164,6 +2238,7 @@ textarea:focus {
|
||||
font-size: 1.8rem;
|
||||
padding: 1rem 2rem;
|
||||
box-sizing: content-box;
|
||||
justify-content: center;
|
||||
}
|
||||
.hideChecked {
|
||||
user-select: none;
|
||||
|
||||
@@ -793,14 +793,16 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
|
||||
}
|
||||
>input{
|
||||
height: 2.5rem !important;
|
||||
height: 6rem !important;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem !important;
|
||||
border-radius: 1rem;
|
||||
// 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: #fff;
|
||||
width: calc(100% - 4rem);
|
||||
width: 25rem;
|
||||
font-size: 1.8rem;
|
||||
transition: all .3s;
|
||||
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);
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.ant-select-selector{
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.ant-picker-input > input{
|
||||
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{
|
||||
padding: 2.5rem 3rem;
|
||||
}
|
||||
.generalModel_btn {
|
||||
.generalModel_closeIcon{
|
||||
transform: translate(-100%, 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: 3rem;
|
||||
@@ -1280,18 +1284,9 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
|
||||
top: 6rem;
|
||||
}
|
||||
.ant-modal-confirm-btns{
|
||||
.ant-btn:hover{
|
||||
color: #fff !important;
|
||||
border-color: #39215b !important;
|
||||
}
|
||||
.ant-btn-primary{
|
||||
background: #39215b !important;
|
||||
border-color: #39215b !important;
|
||||
}
|
||||
.ant-btn-primary:hover{
|
||||
color: #fff !important;
|
||||
border-color: #543087 !important;
|
||||
background: #543087 !important;
|
||||
background: #000 !important;
|
||||
border-color: #000 !important;
|
||||
}
|
||||
}
|
||||
//loding样式
|
||||
@@ -1759,6 +1754,7 @@ textarea:focus{
|
||||
margin: 0;
|
||||
.fi-br-upload{
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
@@ -1827,7 +1823,7 @@ textarea:focus{
|
||||
|
||||
}
|
||||
//设计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{
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
@@ -1843,17 +1839,18 @@ textarea:focus{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.inputShowText{
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
&.active{
|
||||
.input_box_btnBox,textarea{
|
||||
.input_box_btnBox,.search_textarea{
|
||||
// color: rgb(255, 0, .7);
|
||||
border: 1px solid rgb(255, 0, .7);
|
||||
box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
|
||||
}
|
||||
span{
|
||||
.inputShowText{
|
||||
opacity: 1;
|
||||
display: block;
|
||||
color: rgba(255, 0, .7);
|
||||
@@ -1912,10 +1909,23 @@ textarea:focus{
|
||||
padding: 1.5rem 2rem;
|
||||
padding-right: 0;
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
// border
|
||||
&.sketch{
|
||||
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{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@@ -1935,7 +1945,7 @@ textarea:focus{
|
||||
transform: translateY(-50%);
|
||||
height: 5.7rem;
|
||||
width: 5.7rem;
|
||||
border-radius: 50%;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -2034,7 +2044,9 @@ textarea:focus{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.generage_btn{
|
||||
width: 10rem;
|
||||
}
|
||||
.icon-xiala{
|
||||
margin-left: 1rem;
|
||||
transition: all .3s;
|
||||
@@ -2047,12 +2059,13 @@ textarea:focus{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
width: calc(100% - 2rem);
|
||||
left: 2rem;
|
||||
left: 0rem;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem* 1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin-top: .2rem;
|
||||
margin-left: 2rem;
|
||||
>div{
|
||||
background: #cccccc;
|
||||
line-height: 2;
|
||||
@@ -2061,6 +2074,9 @@ textarea:focus{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&.active{
|
||||
background-color: #616161;
|
||||
}
|
||||
}
|
||||
>div:hover{
|
||||
background: #999999;
|
||||
@@ -2074,6 +2090,7 @@ textarea:focus{
|
||||
font-size: 1.8rem;
|
||||
padding: 1rem 2rem;
|
||||
box-sizing: content-box;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<div class="canvasArgument">
|
||||
<div class="label_item wH">
|
||||
<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 class="label_item wH">
|
||||
<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 class="label_item" v-show="
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
@@ -93,7 +93,6 @@
|
||||
: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">
|
||||
{{item.name}}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
@@ -148,6 +147,7 @@
|
||||
}
|
||||
const addImage = (item:any)=>{
|
||||
if(!item.minioUrl)item.minioUrl = item.imgUrl
|
||||
item.imgUrl = item?.url || item?.designOutfitUrl || item?.imgUrl || item?.minioUrl
|
||||
canvasGeneral.addImage(item)
|
||||
}
|
||||
return {
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="canvasContent_box">
|
||||
<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="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
|
||||
<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
|
||||
</div>
|
||||
<div v-else class="generalCanvas_center canvas" ref="canvasDom">
|
||||
</div> -->
|
||||
<div class="generalCanvas_center canvas" ref="canvasDom">
|
||||
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,7 +29,6 @@
|
||||
const data:any = reactive({
|
||||
canvasScaleDom:null,
|
||||
canvasDom:null,
|
||||
isPresuppose:false,
|
||||
isShowMark:false,
|
||||
pencilbtnStyle:{},
|
||||
|
||||
@@ -41,7 +40,7 @@
|
||||
await canvasGeneral.canvasInit(data.canvasDom,{
|
||||
width:data.canvasDom.offsetWidth,
|
||||
height:data.canvasDom.offsetHeight,
|
||||
})
|
||||
},'','','',2000)
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
@@ -105,17 +104,16 @@
|
||||
const openSetData =async ()=>{
|
||||
let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
|
||||
if(oldCanvas){
|
||||
await createCanvas({})
|
||||
await canvasGeneral.createCanvas(data.canvasDom,{
|
||||
width:data.canvasDom.offsetWidth,
|
||||
height:data.canvasDom.offsetHeight,
|
||||
},2000)
|
||||
canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
|
||||
}else{
|
||||
await createCanvas({})
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
if(canvasType == 'export'){
|
||||
data.isPresuppose = true
|
||||
}else{
|
||||
createCanvas({})
|
||||
}
|
||||
|
||||
})
|
||||
return {
|
||||
canvasGeneral,
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
>
|
||||
<div class="layer">
|
||||
<div class="layer-item button" @click="canvasGeneral.createLayer">
|
||||
新建图层
|
||||
Add Layer
|
||||
</div>
|
||||
<div class="layer-item-box-scroll">
|
||||
<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
|
||||
@@ -13,11 +13,11 @@
|
||||
v-for="item,index in layerList"
|
||||
:key="item"
|
||||
:style="item?.style"
|
||||
@click="canvasGeneral.selectLayer(item.id)"
|
||||
@mousedown="mousedown($event,item,index)"
|
||||
@touchstart="touchstart($event,item,index)"
|
||||
@click.stop="canvasGeneral.selectLayer(item.id)"
|
||||
@mousedown.stop="mousedown($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}">
|
||||
<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
|
||||
@@ -26,17 +26,19 @@
|
||||
<div>
|
||||
{{ item.name }}
|
||||
</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 class="layer-menu" :style="styleMenu">
|
||||
<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
|
||||
<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</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 == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</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)">Delete</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')">Cancal rasterization</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -90,7 +92,7 @@
|
||||
const openMenu = (event:any,item:any,index:number)=>{
|
||||
if(event.preventDefault)event.preventDefault();
|
||||
data.itemMenu = item;
|
||||
data.itemMenu.index = index
|
||||
// data.itemMenu.index = index
|
||||
let position = data.detailDom.getBoundingClientRect();
|
||||
data.styleMenu = {
|
||||
left:event.clientX - position.left+'px',
|
||||
@@ -191,7 +193,6 @@
|
||||
}
|
||||
});
|
||||
if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
|
||||
|
||||
}
|
||||
return {
|
||||
canvasGeneral,
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
|
||||
</div>
|
||||
<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
|
||||
<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
|
||||
<publish ref="publish" @clearPublish="()=>{}"></publish>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -118,7 +118,6 @@ export default defineComponent({
|
||||
const getCanvasData = ()=>{
|
||||
if(!canvasObj.canvas)return
|
||||
var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
|
||||
// console.log(JSON.stringify(json));
|
||||
json.objects.forEach(item=>{
|
||||
if(item.type == 'image'){
|
||||
delete item.src
|
||||
@@ -131,6 +130,7 @@ export default defineComponent({
|
||||
return canvasExport
|
||||
}
|
||||
const openSetData = async ()=>{
|
||||
//获取所有所选元素
|
||||
let arr = store.state.Workspace.projectList
|
||||
let obj = {}
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
@@ -142,6 +142,13 @@ export default defineComponent({
|
||||
resolve('')
|
||||
return
|
||||
}
|
||||
if(keys == 'design'){
|
||||
value[keys].forEach((designItem)=>{
|
||||
let minioUrl = designItem.url
|
||||
designItem.url = designItem.designOutfitUrl
|
||||
designItem.minioUrl = designItem.minioUrl
|
||||
})
|
||||
}
|
||||
let rv = {
|
||||
list:value[keys],
|
||||
name:item.name,
|
||||
@@ -150,9 +157,10 @@ export default defineComponent({
|
||||
resolve('')
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
data.elementList = obj
|
||||
//获取所有所选元素 END
|
||||
|
||||
if(data.showCanvas)return
|
||||
data.showCanvas = true
|
||||
dataDom.canvasContent.openSetData()
|
||||
@@ -179,7 +187,6 @@ export default defineComponent({
|
||||
name: "collection.png",
|
||||
});
|
||||
let num = 0;
|
||||
console.log(data.elementList)
|
||||
for (let key in data.elementList) {
|
||||
for (let index = 0; index < data.elementList[key].list.length; index++) {
|
||||
const item = data.elementList[key].list[index];
|
||||
@@ -188,7 +195,6 @@ export default defineComponent({
|
||||
img.push({imgUrl:url,name:`element${index}.${name}`})
|
||||
}
|
||||
}
|
||||
console.log(img)
|
||||
downImg(img);
|
||||
};
|
||||
let getImgArrayBuffer = (url) => {
|
||||
@@ -252,7 +258,7 @@ export default defineComponent({
|
||||
onMounted(() => {
|
||||
});
|
||||
onBeforeUnmount(()=>{
|
||||
// canvasGeneral.canvasClear()
|
||||
canvasObj.canvasClear()
|
||||
})
|
||||
return {
|
||||
isShowMark,
|
||||
|
||||
@@ -117,6 +117,7 @@ import { Https } from "@/tool/https";
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
&.leftAlign{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@@ -1,34 +1,32 @@
|
||||
<template>
|
||||
<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
|
||||
<a-modal
|
||||
class="addDetails_modal generalModel"
|
||||
class="addDetails_modal generalModel fullScreen"
|
||||
v-model:visible="addDetails"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.addDetailsModal"
|
||||
width="78%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:destroyOnClose="true"
|
||||
wrapClassName="#app"
|
||||
:keyboard="false"
|
||||
:mask="false"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<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">
|
||||
<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="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" 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="#000"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
@@ -90,6 +90,7 @@ export default defineComponent({
|
||||
ratio = [1,1]
|
||||
imgData.value = data
|
||||
nextTick(()=>{
|
||||
let contentBox = document.querySelector(".editFrontBack_center");
|
||||
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
|
||||
let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
|
||||
document.removeEventListener('mousemove', mouseMove);
|
||||
@@ -97,33 +98,36 @@ export default defineComponent({
|
||||
let img = new Image();
|
||||
img.onload = async function(){
|
||||
loadingShow.value = true
|
||||
let scale = img.width/img.height
|
||||
let height = canvasBox.offsetHeight;
|
||||
canvasWH.value = height
|
||||
canvasBox.style.width = height * scale+'px'
|
||||
let scale
|
||||
|
||||
|
||||
let wScale = 1
|
||||
let hScale = 1
|
||||
let styleWidth = Number(data.style.width.split('px')[0])
|
||||
let styleHeight = Number(data.style.height.split('px')[0])
|
||||
let width = contentBox.offsetWidth;
|
||||
let height = contentBox.offsetHeight;
|
||||
if(styleWidth>styleHeight){
|
||||
hScale = styleHeight/styleWidth
|
||||
exportWH = img.width
|
||||
canvasWH.value = width
|
||||
scale = img.height/img.width
|
||||
console.log(width,scale)
|
||||
canvasBox.style.height = width * scale+'px'
|
||||
}else{
|
||||
wScale = styleWidth/styleHeight
|
||||
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.height = canvasWH.value * hScale+'px'
|
||||
ratio = [wScale,hScale]
|
||||
// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
|
||||
// width:canvasWH.value * wScale,
|
||||
// height:canvasWH.value * hScale,
|
||||
// })
|
||||
await frontBackCanvasObj.canvasInit(canvasBox,{
|
||||
width:canvasWH.value * wScale,
|
||||
height:canvasWH.value * hScale,
|
||||
},data.maskUrl,'',{})
|
||||
},data.maskUrl,'',{noWheel:true})
|
||||
// undividedLayer
|
||||
canvas = frontBackCanvasObj.canvas
|
||||
|
||||
@@ -383,6 +387,8 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
background: #e6e6e6;
|
||||
cursor: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
@@ -272,10 +272,10 @@ methods: {
|
||||
left: 50%;
|
||||
border-radius: 2rem;
|
||||
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{
|
||||
background: #39215b;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,13 +10,13 @@
|
||||
</div> -->
|
||||
<div v-show="isEditFrontBack" class="frontBack">
|
||||
<div class="label_item" @click.stop="setOperation('print')">
|
||||
<div class="title">Sharding</div>
|
||||
<div class="title">Masking :</div>
|
||||
<a-select
|
||||
v-model:value="frontBackData"
|
||||
:options="frontBackDataList"
|
||||
size="large"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
style="width:12rem;"
|
||||
style="width:18rem;"
|
||||
@change="changeFrontBackData"
|
||||
>
|
||||
<template #suffixIcon
|
||||
@@ -28,7 +28,7 @@
|
||||
</a-select>
|
||||
</div>
|
||||
<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 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>
|
||||
</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="
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
canvasGeneral.operation != 'move' &&
|
||||
@@ -80,7 +91,7 @@
|
||||
<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
|
||||
<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</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="
|
||||
canvasGeneral.operation != 'pencil' &&
|
||||
canvasGeneral.operation != 'eraser'&&
|
||||
@@ -162,13 +163,13 @@
|
||||
frontBackData:'#ff0000',
|
||||
frontBackDataList:[
|
||||
{
|
||||
name:'正面',
|
||||
name:'Front Piece',
|
||||
value:'#ff0000'
|
||||
},{
|
||||
name:'反面',
|
||||
name:'Back Piece',
|
||||
value:'#00ff00'
|
||||
},{
|
||||
name:'背景',
|
||||
name:'Surroundings',
|
||||
value:'background'
|
||||
},
|
||||
]
|
||||
@@ -190,9 +191,10 @@
|
||||
const closeModal = ()=>{
|
||||
document.removeEventListener('click',setOper)
|
||||
}
|
||||
const selectImgItem = (data:any)=>{
|
||||
data.minioUrl = data.url
|
||||
canvasGeneral.addPartImg(data,'print')
|
||||
const selectImgItem = (value:any)=>{
|
||||
value.minioUrl = value.url
|
||||
canvasGeneral.addPartImg(value,'print')
|
||||
data.operation = ''
|
||||
}
|
||||
const changeFrontBackData = (value:any)=>{
|
||||
emit('setFrontBackColor',value)
|
||||
@@ -227,7 +229,7 @@
|
||||
display: flex;
|
||||
}
|
||||
> .current{
|
||||
border-radius: 3rem;
|
||||
border-radius: 1rem;
|
||||
height: 3rem;
|
||||
width: 7rem;
|
||||
border: 1px solid #000;
|
||||
@@ -238,7 +240,7 @@
|
||||
top: 4rem;
|
||||
background: #fff;
|
||||
border: 1px solid #000;
|
||||
border-radius: 2rem;
|
||||
border-radius: 1rem;
|
||||
padding: 2.4rem;
|
||||
width: 40rem;
|
||||
height: 50rem;
|
||||
@@ -264,14 +266,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
input{
|
||||
height: 100%;
|
||||
border-radius: 3rem;
|
||||
width: 12rem;
|
||||
background: #fff;
|
||||
height: 3rem;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
&.wH input{
|
||||
width: 5rem;
|
||||
}
|
||||
@@ -280,23 +275,7 @@
|
||||
font-weight: 600;
|
||||
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{
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
const store = useStore();
|
||||
let {t} = useI18n()
|
||||
let canvasType = inject('canvasType')
|
||||
let getCanvasIfEdit:any = inject('getCanvasIfEdit')
|
||||
let canvasGeneral:any = inject('canvasObj')
|
||||
const data:any = reactive({
|
||||
canvasScaleDom:null,
|
||||
@@ -31,6 +32,9 @@
|
||||
|
||||
|
||||
})
|
||||
getCanvasIfEdit.fun = ()=>{
|
||||
return canvasGeneral.getElement()
|
||||
}
|
||||
const createCanvas = (canvasSize:any)=>{
|
||||
nextTick(async ()=>{
|
||||
let img = data.selectDetail.undividedLayer
|
||||
@@ -53,8 +57,9 @@
|
||||
width:WH.height*wScale,
|
||||
height:WH.height*hScale,
|
||||
}
|
||||
// let editGroupImg = data.selectDetail.partialDesign.partialDesignPath || data.selectDetail.partialDesign.partialDesignBase64
|
||||
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
|
||||
// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
|
||||
|
||||
@@ -87,6 +87,7 @@ export default defineComponent({
|
||||
})
|
||||
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
|
||||
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
// privewDetail(oldValue)
|
||||
},{immediate: true})
|
||||
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
|
||||
provide('canvasObj',detailData.canvasObj)
|
||||
@@ -121,9 +122,9 @@ export default defineComponent({
|
||||
detailData.frontBackCanvasObj.currentOperation = false
|
||||
}
|
||||
}
|
||||
const privewDetail = async ()=>{
|
||||
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
|
||||
let data = await detailData.canvasObj.detailSubmit()
|
||||
detailData.selectDetail.partialDesign.partialDesignBase64 = data
|
||||
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
|
||||
}
|
||||
const setFrontBackColor = (data:any)=>{
|
||||
detailDom.editFrontBack.setBackground(data)
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
:closable="false"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="nav">
|
||||
<div class="nav" :class="{isEditPattern:isEditPattern.value}">
|
||||
<div class="back_home">
|
||||
<div class="gallery_btn" @click="closeModal()">
|
||||
<i class="fi fi-rs-house-chimney"></i>
|
||||
@@ -130,8 +130,12 @@ export default defineComponent({
|
||||
childKey:0,
|
||||
singleOveral:{
|
||||
value:'overall'
|
||||
}
|
||||
},
|
||||
getCanvasIfEdit:{
|
||||
fun:null,
|
||||
},
|
||||
})
|
||||
provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
|
||||
provide('singleOveral',detailData.singleOveral)
|
||||
provide('isEditPattern',detailData.isEditPattern)
|
||||
const closeModal = ()=>{
|
||||
@@ -142,6 +146,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
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}`
|
||||
detailData.loadingShow = true
|
||||
Https.axiosGet(url).then(
|
||||
@@ -154,10 +159,20 @@ export default defineComponent({
|
||||
item.layersObject[0] = item.layersObject[1]
|
||||
item.layersObject[1] = a
|
||||
}
|
||||
item.color.rgba = {
|
||||
r:item.color.r,
|
||||
g:item.color.g,
|
||||
b:item.color.b,
|
||||
if(item.color){
|
||||
item.color.rgba = {
|
||||
r:item.color.r,
|
||||
g:item.color.g,
|
||||
b:item.color.b,
|
||||
}
|
||||
}else{
|
||||
item.color = {
|
||||
rgba:{
|
||||
r:255,
|
||||
g:255,
|
||||
b:255,
|
||||
}
|
||||
}
|
||||
}
|
||||
if(item.gradient){
|
||||
item.color.gradient = item.gradient
|
||||
@@ -170,14 +185,14 @@ export default defineComponent({
|
||||
});
|
||||
})
|
||||
detailData.singleOveral.value = rv.singleOverall
|
||||
console.log(detailData.singleOveral)
|
||||
detailData.designDetailShow = true
|
||||
store.commit('DesignDetailCopy/setDesignDetail',rv)
|
||||
// this.deleteShow = false
|
||||
|
||||
setRevocation()
|
||||
detailData.loadingShow = false
|
||||
// await this.setImgSize()
|
||||
|
||||
store.commit('DesignDetailCopy/setDesignColthes',rv.clothes[0].id)
|
||||
}
|
||||
|
||||
).catch(rv=>{
|
||||
@@ -240,6 +255,7 @@ export default defineComponent({
|
||||
const setClothes = async (list:any)=>{
|
||||
let clothesList:any = []
|
||||
for(let i = 0;i<list.length;i++){
|
||||
detailData.selectDetail
|
||||
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.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
|
||||
@@ -425,13 +441,26 @@ export default defineComponent({
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
z-index: 2;
|
||||
:deep(.ant-modal-wrap){
|
||||
.ant-modal-body{
|
||||
padding: 0;
|
||||
:deep(>div){
|
||||
> .ant-modal-root{
|
||||
> .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{
|
||||
display: flex;
|
||||
@@ -444,7 +473,7 @@ export default defineComponent({
|
||||
&.detailLeft{
|
||||
width: 34rem;
|
||||
}
|
||||
&.isEditPattern{width: 0;}
|
||||
&.isEditPattern{width: 0px;}
|
||||
&.model{
|
||||
width: 50rem;
|
||||
margin: 0 10rem;
|
||||
@@ -486,6 +515,9 @@ export default defineComponent({
|
||||
}
|
||||
> .nav{
|
||||
margin-right: 5rem;
|
||||
overflow: hidden;
|
||||
// transition: all .3s;
|
||||
&.isEditPattern{width: 0px;margin: 0;}
|
||||
> .back_home{
|
||||
width: 9rem;
|
||||
text-align: center;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="color">
|
||||
<div class="detailText">Palette</div>
|
||||
<div class="detailText">Current color</div>
|
||||
<div class="pallet">
|
||||
<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
|
||||
</div>
|
||||
<div class="detailText">New color</div>
|
||||
<div class="detailText">Color pelette</div>
|
||||
<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-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>
|
||||
</div>
|
||||
<div class="detailText">Upload Image</div>
|
||||
<div class="detailText">Choose color from image</div>
|
||||
<div class="uploadImage">
|
||||
<upload @selectUplpadColor="selectUplpadColor"></upload>
|
||||
</div>
|
||||
@@ -246,18 +246,19 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
> .detailText{
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
> .pallet{
|
||||
margin-bottom: 4.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .colorBox{
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> .colorBoxItem{
|
||||
margin: 1rem 0;
|
||||
// margin: 1rem 0;
|
||||
margin-bottom: 1rem;
|
||||
width: 32%;
|
||||
height: 11rem;
|
||||
border-radius: .5rem;
|
||||
|
||||
@@ -272,7 +272,7 @@ export default defineComponent({
|
||||
nextTick().then(()=>{
|
||||
const backIcon = document.createElement('div');
|
||||
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);
|
||||
backIcon.addEventListener('click',async ()=>{
|
||||
try {
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
>
|
||||
<div class="upload_tip_block">
|
||||
<i class="fi fi-rr-picture"></i>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="detailLeft">
|
||||
<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
|
||||
<print v-show="currentDetailType == 'print'"></print>
|
||||
<color v-show="currentDetailType == 'color'"></color>
|
||||
<color v-if="currentDetailType == 'color'"></color>
|
||||
<element v-show="currentDetailType == 'element'"></element>
|
||||
<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="libraryList">
|
||||
<div class="generalModel_state">
|
||||
<div class="generalModel_state_item">
|
||||
<div class="generalModel_state" v-if="type != 'element'">
|
||||
<div class="generalModel_state_item" style="width: 40%;">
|
||||
<a-select
|
||||
v-model:value="designType"
|
||||
:options="designTypeList"
|
||||
@@ -18,8 +18,10 @@
|
||||
></template>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="generalModel_state_item">
|
||||
<input class="search_input" :placeholder="$t('DesignDetailAlter.inputContent1')" v-model="searchPictureName" @keydown.enter="getLibraryList()">
|
||||
<div class="generalModel_state_item" style="width: 35%;">
|
||||
<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>
|
||||
<!-- clothesPrint -->
|
||||
@@ -84,6 +86,7 @@ export default defineComponent({
|
||||
currentPage:1,
|
||||
})
|
||||
const init = ()=>{
|
||||
console.log(123)
|
||||
detailData.designTypeList = props.catecoryList
|
||||
detailData.designType = detailData.designTypeList[0].value
|
||||
getLibraryList()
|
||||
@@ -207,13 +210,15 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
> .generalModel_state{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> .generalModel_state_item{
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
> .search_icon_block{
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
// position: absolute;
|
||||
// right: 5px;
|
||||
width: calc(6rem - 4px);
|
||||
height: calc(6rem - 4px);
|
||||
color: #fff;
|
||||
@@ -227,7 +232,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .generalModel_state_item:last-child{
|
||||
margin-top: 2rem;
|
||||
// margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
> .libraryList_box{
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="selectList">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_list" v-if="type != 'element'">
|
||||
<div
|
||||
v-if="type != 'element'"
|
||||
@click.stop="openCurrent()"
|
||||
class="switch_type_item"
|
||||
:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
|
||||
@@ -28,7 +27,7 @@
|
||||
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
|
||||
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
|
||||
</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>
|
||||
</div>
|
||||
<div class="content_item" v-show="selectTitle == 'library'">
|
||||
@@ -39,7 +38,7 @@
|
||||
|
||||
</template>
|
||||
<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 { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@@ -78,7 +77,7 @@ export default defineComponent({
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
selectTitle: props.type == 'element'?'upload':'current',
|
||||
selectTitle: props.type == 'element'?'library':'current',
|
||||
printList:[]
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
@@ -97,7 +96,11 @@ export default defineComponent({
|
||||
const selectImgItem = (data:any)=>{
|
||||
emit('selectImgItem',data)
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
if(props.type == 'element'){
|
||||
openLibrary()
|
||||
}
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
@@ -70,7 +70,9 @@
|
||||
<a-spin size="large" />
|
||||
</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>
|
||||
|
||||
</template>
|
||||
@@ -293,7 +295,6 @@ export default defineComponent({
|
||||
let state = true
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
let arr:any = editPrintElementData.selectDetail.printObject.prints
|
||||
console.log(props.type)
|
||||
if(props.type == 'element'){
|
||||
arr = editPrintElementData.selectDetail.printObject.trims
|
||||
}
|
||||
@@ -496,8 +497,10 @@ export default defineComponent({
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
const clearOverall = ()=>{
|
||||
editPrintElementData.printStyleList[props.type].overall = []
|
||||
}
|
||||
onMounted(()=>{
|
||||
console.log(123123)
|
||||
if(props.type == 'element'){
|
||||
editPrintElementData.stateOverallSingle = 'single'
|
||||
editPrintElementData.overallSingle = true
|
||||
@@ -516,13 +519,13 @@ export default defineComponent({
|
||||
itemSizeMousedown,
|
||||
deletePrint,
|
||||
previewDetailPrintData,
|
||||
clearOverall,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value:any){
|
||||
console.log(value)
|
||||
let mousedown = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
mouseDownOperation(e)
|
||||
@@ -680,6 +683,8 @@ export default defineComponent({
|
||||
.designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: 60%;
|
||||
// max-height: 80%;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="sketchType">
|
||||
<div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
|
||||
<div class="detailText">New Apparel</div>
|
||||
<div class="sketchContent">
|
||||
<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 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" 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>
|
||||
<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 { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import position from './modelPosition.vue';
|
||||
import modelNav from './modelNav.vue';
|
||||
@@ -40,9 +41,10 @@ export default defineComponent({
|
||||
},
|
||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
})
|
||||
const setRevocation:any = inject('setRevocation')
|
||||
const getDetailListData = reactive({
|
||||
@@ -58,7 +60,31 @@ export default defineComponent({
|
||||
return getDetailListDom.position.getSubmitData(value)
|
||||
}
|
||||
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 = ()=>{
|
||||
setRevocation()
|
||||
|
||||
@@ -33,14 +33,19 @@ export default defineComponent({
|
||||
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||||
frontBack:{} 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)=>{
|
||||
detailData.frontBack = newFollowVue
|
||||
})
|
||||
const selectDetailItem = (item:any,index:number)=>{
|
||||
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({
|
||||
title: t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
@@ -58,6 +63,7 @@ export default defineComponent({
|
||||
});
|
||||
}else{
|
||||
resolve(true)
|
||||
emit('canvasReload')
|
||||
}
|
||||
}).then((rv)=>{
|
||||
if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="molepositon" :class="{active:!imgDesignImg}">
|
||||
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :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_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.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="">
|
||||
</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 || ''">
|
||||
<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">
|
||||
<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" 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="">
|
||||
</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))">
|
||||
<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>
|
||||
@@ -18,7 +18,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask" v-else>
|
||||
<!-- <img src="" alt=""> -->
|
||||
<img :src="selectDetail.undividedLayer" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="molepositon" :class="{active:imgDesignImg}">
|
||||
@@ -339,6 +339,7 @@ export default defineComponent({
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(selectItem),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
itemSizeMousedown,
|
||||
@@ -407,9 +408,10 @@ export default defineComponent({
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: contain;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
@@ -426,11 +428,6 @@ export default defineComponent({
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
&.active{
|
||||
> img{
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
<div>{{ $t('Cropper.Cutpicture') }}</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
@@ -54,7 +53,7 @@
|
||||
<div class="review_logo icon iconfont icon-yulan"></div>
|
||||
<div>{{ $t('Cropper.CropPreview') }}</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_content" :class="{active:isRound}" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div">
|
||||
@@ -62,6 +61,10 @@
|
||||
</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_block_sec" :style="{'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden'}">
|
||||
<div :style="previews.div" >
|
||||
@@ -206,11 +209,10 @@ export default defineComponent({
|
||||
padding: 0 calc(1.2rem*1.2);
|
||||
height: calc(3.2rem*1.2);
|
||||
// background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
background: linear-gradient(-137deg, #eeefdb, #e7dbed);
|
||||
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-radius: calc(1.6rem*1.2);
|
||||
font-size: calc(1.4rem*1.2);
|
||||
color: #000;
|
||||
line-height: calc(3.2rem*1.2);
|
||||
margin-right: calc(1.6rem*1.2);
|
||||
white-space: nowrap;
|
||||
@@ -237,10 +239,16 @@ export default defineComponent({
|
||||
// background: #F2F3FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.cut_picture_right,.cut_picture_left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.cut_picture_left{
|
||||
width: calc(70.7rem*1.2);
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 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{
|
||||
// width: 39.2rem;
|
||||
width: calc(52rem*1.2);
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: calc(2rem*1.2);
|
||||
|
||||
margin-block: -5rem;
|
||||
.cur_picture_right_header{
|
||||
padding: calc(2rem*1.2);
|
||||
// padding: calc(2rem*1.2);
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--aida-fsize1-8);
|
||||
@@ -324,9 +332,25 @@ export default defineComponent({
|
||||
|
||||
.cut_picture_review_block{
|
||||
width: 100%;
|
||||
padding: 0 calc(2rem*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{
|
||||
width: 100%;
|
||||
// height: 50%;
|
||||
@@ -338,7 +362,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: scale(0.8) translate(-50%, -50%);
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
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);
|
||||
border-radius: calc(1rem*1.2);
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
<!-- <input
|
||||
class="search_input"
|
||||
@input="ifMaximumLength"
|
||||
:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
|
||||
@@ -48,7 +48,18 @@
|
||||
@keydown.enter="getgenerate()"
|
||||
@click="inputFocus()"
|
||||
@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'">
|
||||
<a-upload
|
||||
class="search_upImg"
|
||||
@@ -68,8 +79,8 @@
|
||||
</a-upload>
|
||||
</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-bs-compress" @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> -->
|
||||
</div>
|
||||
<div class="input_box_btnBox sketch" v-else>
|
||||
<div class="upload_item" v-show="sketchboardList.length > 0">
|
||||
@@ -91,7 +102,7 @@
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<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>
|
||||
@@ -127,8 +138,10 @@
|
||||
@click.stop=""
|
||||
v-model="searchPictureName"
|
||||
></textarea>
|
||||
<div class="generage_btn_box" v-show="!isGenerate">
|
||||
<div class="generage_btn started_btn">
|
||||
<div class="generage_btn_box">
|
||||
<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">
|
||||
<span
|
||||
v-if="
|
||||
@@ -139,22 +152,29 @@
|
||||
{{ speedData.label }}
|
||||
</span>
|
||||
<span v-else>{{ $t('Generate.Generate') }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="icon iconfont icon-xiala" v-show="
|
||||
type_.type2 == 'Moodboard' ||
|
||||
(type_.type2 == 'Printboard' && scene?.value == 'Pattern') ||
|
||||
(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 class="content" v-show="speedState">
|
||||
<div v-for="item in speedList" :key="item.value" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
|
||||
<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
|
||||
<i class="fi fi-br-loading" ></i>
|
||||
</div>
|
||||
<div class="generage_btn started_btn" v-show="remGenerate" @click="removeGenerate">
|
||||
{{$t('Generate.Close')}}
|
||||
</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>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div> -->
|
||||
<span class="inputShowText" ref="inputShowText"></span>
|
||||
</div>
|
||||
<div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
|
||||
@@ -273,20 +293,20 @@ export default defineComponent({
|
||||
let speed = reactive({
|
||||
speedList:[
|
||||
{
|
||||
title:'Picture quality is average, speed is fast',
|
||||
label:'Low Quality',
|
||||
title:'Generate image in fast speed normal quality',
|
||||
label:'Normal',
|
||||
value:'fast',
|
||||
|
||||
},{
|
||||
title:'Picture quality is high, speed is slow',
|
||||
label:'High Quality',
|
||||
title:'Generate image in high quality low speed',
|
||||
label:'High',
|
||||
value:'high',
|
||||
},
|
||||
],
|
||||
speedState:false,
|
||||
speedData:{
|
||||
title:'Picture quality is average, speed is fast',
|
||||
label:'Low Quality',
|
||||
title:'Generate image in fast speed normal quality',
|
||||
label:'Normal',
|
||||
value:'fast',
|
||||
},
|
||||
})
|
||||
@@ -646,7 +666,7 @@ export default defineComponent({
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
this.generateTime = setInterval(()=>{
|
||||
if(!this.isGenerate || this.remGenerate)return
|
||||
if(!this.isGenerate || !this.remGenerate)return
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||
@@ -753,10 +773,25 @@ export default defineComponent({
|
||||
this.searchPictureSeed = 0
|
||||
}
|
||||
},
|
||||
ifMaximumLength(){
|
||||
ifMaximumLength(event:any){
|
||||
clearTimeout(this.inputTime)
|
||||
let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[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(()=>{
|
||||
// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
|
||||
// let num2 = (input as HTMLInputElement).value.split(' ').length
|
||||
@@ -957,8 +992,9 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
// padding-top: calc(2.5rem*1.2);
|
||||
.input_border{
|
||||
.input_border{//输入框
|
||||
padding-top: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.mark_loading{
|
||||
@@ -1011,8 +1047,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: calc(10rem*1.2);
|
||||
height: calc(10rem*1.2);
|
||||
// width: calc(10rem*1.2);
|
||||
// height: calc(10rem*1.2);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&:hover .delete_like_file_block{
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="my_material_header">
|
||||
<div class="my_material_header_left" v-if="selectCode != 'Moodboard'">
|
||||
<div class="select_block">
|
||||
<generalMenu :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
|
||||
<generalMenu selectWidth="15rem" :dataList="disignTypeList" @setprintModel="menuChange" :item="disignType"></generalMenu>
|
||||
<!-- <a-select
|
||||
ref="select"
|
||||
v-model:value="disignType"
|
||||
|
||||
@@ -199,9 +199,8 @@ export default defineComponent({
|
||||
.collection_review{
|
||||
// width: 40.8rem;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
.collection_review_mark{
|
||||
position: absolute;
|
||||
@@ -213,7 +212,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.img_block_item{
|
||||
margin-bottom: 2rem;
|
||||
// &.color_block_item{
|
||||
// padding: 0 0.5rem 0 0.3rem;
|
||||
// }
|
||||
|
||||
@@ -656,7 +656,7 @@ export default defineComponent({
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 14rem;
|
||||
width: 18rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
@@ -669,7 +669,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 14rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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">
|
||||
<template #content>
|
||||
<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
|
||||
@@ -15,12 +15,12 @@
|
||||
</div>
|
||||
<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
|
||||
</div>
|
||||
<ul :class="driverClass.class2" v-show="openClick">
|
||||
<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
|
||||
<ul :class="driverClass.class2" v-show="openClick" :style="{'width':selectWidth}">
|
||||
<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">
|
||||
<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> -->
|
||||
<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 ">
|
||||
<i class="fi fi-br-upload input_border" style="width: 8rem; height: 8rem;padding: 0;" :title="$t('Generate.uploadTitle')">
|
||||
<a-upload
|
||||
@@ -43,12 +43,12 @@
|
||||
<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
|
||||
|
||||
</template>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
<span v-if="listItem?.label">{{ listItem?.label }}</span>
|
||||
<span v-else>{{ listItem?.name }}</span>
|
||||
</a-popover>
|
||||
<div v-else>
|
||||
<span v-if="item?.label">{{ item?.label }}</span>
|
||||
<span v-else>{{ item?.name }}</span>
|
||||
<span v-if="listItem?.label">{{ listItem?.label }}</span>
|
||||
<span v-else>{{ listItem?.name }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -90,6 +90,10 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
style_:{
|
||||
type:Object,
|
||||
default:{}
|
||||
},
|
||||
selectWidth:{
|
||||
type:String,
|
||||
default:'20rem'
|
||||
}
|
||||
},
|
||||
emits:['setprintModel'],
|
||||
@@ -200,7 +204,7 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
//衣服类型下拉菜单
|
||||
.generalMenu_printModel{
|
||||
margin-right: 2rem;
|
||||
height: 6rem;
|
||||
height: 5rem;
|
||||
.icon-xiala{
|
||||
margin-left: auto;
|
||||
transition: all .3s;
|
||||
@@ -212,11 +216,11 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
// display: flex;
|
||||
display: block;
|
||||
width: 20rem;
|
||||
border-radius: 4rem;
|
||||
border-radius: 1rem;
|
||||
margin: 0;
|
||||
border: 1px solid;
|
||||
cursor: pointer;
|
||||
padding: 1.5rem 2rem;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
font-size: 1.8rem;
|
||||
@@ -239,7 +243,6 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
position: absolute;
|
||||
border: 1px solid;
|
||||
width: 20rem;
|
||||
text-align: center;
|
||||
margin-top: calc(.3rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
@@ -265,6 +268,10 @@ import { message, Upload, Modal } from "ant-design-vue";
|
||||
cursor: not-allowed;
|
||||
|
||||
}
|
||||
&.hover{
|
||||
background: #f3f3f6;
|
||||
color: #000;
|
||||
}
|
||||
:deep(.icon-shanchu){
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</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">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
@@ -113,10 +113,11 @@ export default defineComponent({
|
||||
let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
|
||||
//取出数组对象某个值
|
||||
let storeData = {
|
||||
name:'测试项目',
|
||||
name:rv.name,
|
||||
id:rv.id,
|
||||
type:type?.value,
|
||||
httpType:rv.process,//项目类型
|
||||
ageGroup:rv.workspaceVO.ageGroup,
|
||||
style:rv.workspaceVO.style,
|
||||
styleId:rv.workspaceVO.styleId,
|
||||
styleName:rv.workspaceVO.styleName,
|
||||
|
||||
@@ -655,15 +655,17 @@ export default defineComponent({
|
||||
|
||||
setColorboardList(colorList){
|
||||
let newColorList = colorList.map((v)=>{
|
||||
console.log(v)
|
||||
let data = {
|
||||
id:'',
|
||||
name:'',
|
||||
name:v?.name?v?.name:'',
|
||||
rgbValue:v.rgba,
|
||||
gradient:v.gradient,
|
||||
|
||||
}
|
||||
return data
|
||||
})
|
||||
console.log(123)
|
||||
this.store.commit('setColorboardList',newColorList)
|
||||
},
|
||||
|
||||
@@ -671,11 +673,11 @@ export default defineComponent({
|
||||
let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
|
||||
let hex
|
||||
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])
|
||||
this.colorList[index].rgba = ele.rgbValue
|
||||
this.colorList[index].gradient = ele.gradient
|
||||
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
|
||||
// if(ele.gradient) this.colorList[index].gradient = ele.gradient
|
||||
this.colorList[index].name = ele.name
|
||||
});
|
||||
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} //顔色选择器默认颜色
|
||||
@@ -974,7 +976,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.fi-rr-square-plus,.fi-rr-picture{
|
||||
zoom: 7.5;
|
||||
zoom: 6;
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item{
|
||||
|
||||
@@ -339,6 +339,7 @@ export default defineComponent({
|
||||
deleteFile(item: any) {
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
|
||||
item.state = 'delete'
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
|
||||
@@ -384,6 +384,7 @@ export default defineComponent({
|
||||
// this.store.commit('setPrintboardFile',this.fileList)
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
|
||||
item.state = 'delete'
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.printboardFiles
|
||||
|
||||
@@ -465,6 +465,7 @@ export default defineComponent({
|
||||
deleteFile(item: any) {
|
||||
if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
|
||||
item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
|
||||
item.state = 'delete'
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
|
||||
@@ -658,7 +659,7 @@ export default defineComponent({
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
>div{
|
||||
width: 14rem;
|
||||
width: 18rem;
|
||||
font-size: var(--aida-fsize1-6);
|
||||
border: 0;
|
||||
i{
|
||||
@@ -671,7 +672,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
ul{
|
||||
width: 14rem;
|
||||
width: 18rem;
|
||||
}
|
||||
}
|
||||
.switch_type_item:nth-child(3){
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<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="
|
||||
canvasGeneral.operation != 'movePosition' &&
|
||||
canvasGeneral.operation != 'move' &&
|
||||
@@ -77,6 +84,7 @@
|
||||
<span style="margin-right: 2rem;">Show Models</span>
|
||||
<a-switch v-model:checked="isShowBg" @change="showBg" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<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 { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@@ -31,8 +31,12 @@
|
||||
const dataDom = reactive({
|
||||
canvasScaleDom:null as any,
|
||||
})
|
||||
watch(()=>data.selectObject.model.id,(newVal:any)=>{
|
||||
if(newVal){
|
||||
canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
|
||||
}
|
||||
})
|
||||
const createCanvas = ()=>{
|
||||
console.log(123123,data.isCanvas)
|
||||
if(data.isCanva)return
|
||||
nextTick(async ()=>{
|
||||
let width = dataDom.canvasScaleDom.offsetWidth
|
||||
|
||||
@@ -9,9 +9,17 @@
|
||||
<div class="designPage_left" ref="hidden">
|
||||
<div class="designPage_left_content" :class="{'active':(domHidden)}">
|
||||
<!-- 有图状态 start-->
|
||||
|
||||
<div class="home_left_info">
|
||||
<div class="left_info_content scroll_style">
|
||||
<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>
|
||||
<!-- <ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection> -->
|
||||
|
||||
@@ -36,15 +44,15 @@
|
||||
<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
|
||||
{{ $t('HomeView.Design') }}
|
||||
</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()">
|
||||
{{ $t('HomeView.Redesign') }}
|
||||
</div>
|
||||
<div class="silder button_margin_14" v-show="designCollectionId">
|
||||
</div> -->
|
||||
<div class="silder button_margin_14" v-show="likeDesignCollectionList?.length > 0">
|
||||
<div class="text">Small</div>
|
||||
<a-slider
|
||||
class="system_silder"
|
||||
v-model:value="collValue"
|
||||
v-model:value="elementWidth"
|
||||
:min="minCollValue"
|
||||
:max="maxCollValue-1"
|
||||
@afterChange="setSystemDesigner(500)"
|
||||
@@ -53,10 +61,9 @@
|
||||
</a-slider>
|
||||
<div class="text">Big</div>
|
||||
</div>
|
||||
<div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
||||
<!-- {{ $t('HomeView.Export') }} -->
|
||||
<!-- <div v-show="designCollectionId && userGroupId" class="gallery_btn Guide_1_31" style="margin-left: auto" @click="exportModel()">
|
||||
{{$t('HomeView.FinalizeCollection')}}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_content_block_box">
|
||||
@@ -73,7 +80,6 @@
|
||||
</div>
|
||||
<div class="right_content_img_block scroll_style active">
|
||||
<div class="right_content_img_item" ref="likeItemDom" designType="like" :index="0">
|
||||
|
||||
<div class="content_img_block content_img_GetWidth active" :style="likeStyle"
|
||||
v-for="(design, index) in likeDesignCollectionList" :key="design.id"
|
||||
@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)
|
||||
|
||||
const collItemSize = reactive({
|
||||
collValue:( sessionStorageCollValue>= 20? 10:sessionStorageCollValue) || 3,
|
||||
minCollValue:4,
|
||||
maxCollValue:20,
|
||||
collValue:6,
|
||||
elementWidth:100,
|
||||
minCollValue:100,
|
||||
maxCollValue:999,
|
||||
padding:60,
|
||||
likeStyle:{
|
||||
width:'240px',
|
||||
height:'370px',
|
||||
@@ -370,14 +378,18 @@ export default defineComponent({
|
||||
}
|
||||
let getDesignTime = null as any;
|
||||
const setSystemDesigner = (time:any)=>{
|
||||
|
||||
clearTimeout(collItemSize.collTime)
|
||||
collItemSize.collTime = setTimeout(()=>{
|
||||
nextTick(()=>{
|
||||
let parentWidth = likeItemDom.value.parentElement.offsetWidth
|
||||
collItemSize.minCollValue = collItemSize.maxCollValue - Math.round(likeItemDom.value.parentElement.offsetWidth/120)
|
||||
collItemSize.collValue = collItemSize.collValue<collItemSize.minCollValue?collItemSize.minCollValue:collItemSize.collValue
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
collItemSize.itemStyle.width = (parentWidth - (value * 10)) / value
|
||||
collItemSize.elementWidth = collItemSize.elementWidth == -1?100:collItemSize.elementWidth
|
||||
collItemSize.maxCollValue = parentWidth / 2
|
||||
collItemSize.collValue = Math.floor(parentWidth / collItemSize.elementWidth)
|
||||
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.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
|
||||
@@ -476,6 +488,7 @@ export default defineComponent({
|
||||
//排序 从大到小
|
||||
const sortDesignCollection = ()=> {
|
||||
let arrData:any = []
|
||||
if(!likeDesignCollectionList.value)return
|
||||
likeDesignCollectionList.value.forEach((likeItem:any)=>{
|
||||
let item = posiitonData.value.likeElList.filter((item:any)=>item.userLikeSortId == likeItem.userLikeSortId)[0]
|
||||
likeItem.sort = item.sort + 1
|
||||
@@ -499,7 +512,7 @@ export default defineComponent({
|
||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||
let elList = str == 'like'? posiitonData.value.likeElList:posiitonData.value.generateElList
|
||||
let index = str == 'like'?posiitonData.value.likeSelectIndex:posiitonData.value.generateSelectIndex
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
let value = collItemSize.collValue
|
||||
let width,height,num
|
||||
if(str == 'like'){
|
||||
num = value
|
||||
@@ -579,14 +592,14 @@ export default defineComponent({
|
||||
const moveItem = (str:any)=>{
|
||||
let elLikeList = posiitonData.value.likeElList
|
||||
let generateElList = posiitonData.value.generateElList
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
let value = collItemSize.collValue
|
||||
let width,height
|
||||
width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0]
|
||||
height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1]
|
||||
|
||||
// let num = str == 'like'?value:3
|
||||
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';
|
||||
}
|
||||
for(let i = 0;i < generateElList.length;i++){
|
||||
@@ -820,18 +833,6 @@ export default defineComponent({
|
||||
|
||||
//设计新的collection
|
||||
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);
|
||||
let data = this.getDesignData("");
|
||||
if(this.driver__.driver){
|
||||
@@ -840,7 +841,7 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
this.isShowMark = true
|
||||
this.store.commit("setLikeDesignCollectionList", []);
|
||||
// this.store.commit("setLikeDesignCollectionList", []);
|
||||
Https.axiosPost(Https.httpUrls.designCollection, data)
|
||||
|
||||
.then((rv: any) => {
|
||||
@@ -856,8 +857,8 @@ export default defineComponent({
|
||||
|
||||
this.getDesignResult(value,'newDesign')
|
||||
this.startDesignType = "design";
|
||||
this.posiitonData.likeSelectIndex = 0
|
||||
this.posiitonData.likeElList = []
|
||||
// this.posiitonData.likeSelectIndex = 0
|
||||
// this.posiitonData.likeElList = []
|
||||
}
|
||||
this.isShowMark = false;
|
||||
})
|
||||
@@ -906,7 +907,7 @@ export default defineComponent({
|
||||
this.showDesignMark = false
|
||||
if(str == 'newDesign'){
|
||||
if(rv.designCollectionItems){
|
||||
this.store.commit("deleteUserGroupId");
|
||||
// this.store.commit("deleteUserGroupId");
|
||||
this.store.commit(
|
||||
"setDesignCollectionId",
|
||||
rv.collectionId
|
||||
@@ -941,14 +942,6 @@ export default defineComponent({
|
||||
},
|
||||
//重新设计collection
|
||||
resDesignCollection() {
|
||||
let { colorBoards } =
|
||||
this.store.state.UploadFilesModule.allBoardData;
|
||||
if (!colorBoards || colorBoards?.length < 1) {
|
||||
message.info(
|
||||
this.t('HomeView.jsContent2')
|
||||
);
|
||||
return;
|
||||
}
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
@@ -1131,7 +1124,8 @@ export default defineComponent({
|
||||
likeDesignCollection(design: any, index: any) {
|
||||
let data = {
|
||||
designItemId: design.designItemId,
|
||||
userGroupId: this.userGroupId,
|
||||
userGroupId: this.store.state.HomeStoreModule.userGroupId,
|
||||
projectId: this.store.state.Workspace.probjects.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
designPythonOutfitId:design.designOutfitId?design.designOutfitId:design.designPythonOutfitId
|
||||
};
|
||||
@@ -1178,7 +1172,7 @@ export default defineComponent({
|
||||
let data = {
|
||||
designId: design.designId || this.designId,
|
||||
designPythonOutfitId:design.designOutfitId,
|
||||
groupDetailId: design.groupDetailId,
|
||||
groupDetailId: design.groupDetailId || design.id,
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
};
|
||||
if (this.disLikeLoading) {
|
||||
@@ -1392,6 +1386,9 @@ export default defineComponent({
|
||||
if(button == 'design'){
|
||||
this.designNewCollection()
|
||||
}
|
||||
nextTick(()=>{
|
||||
this.setSystemDesigner(100)
|
||||
})
|
||||
},
|
||||
//销毁图片详情
|
||||
setDetailDestroy() {
|
||||
@@ -1504,6 +1501,62 @@ export default defineComponent({
|
||||
// padding-bottom: 4rem;
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -1515,7 +1568,6 @@ export default defineComponent({
|
||||
.designPage_left {
|
||||
// width: 44.4rem;
|
||||
height: 100%;
|
||||
padding: 2rem 0 0 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
@@ -1589,7 +1641,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
.right_top {
|
||||
padding: 2rem 3.2rem 2rem 1.2rem;
|
||||
padding: 1rem 3.2rem 2rem 1.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0rem 0.2rem 8rem 0rem rgba(238, 238, 244, 0.25);
|
||||
@@ -1656,62 +1708,7 @@ export default defineComponent({
|
||||
&.active{
|
||||
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 {
|
||||
// padding: 0 1.8rem 0 1.2rem;
|
||||
// height: calc(50% - 4.5rem);
|
||||
|
||||
@@ -169,9 +169,13 @@
|
||||
</div>
|
||||
<div class="input_blok" v-show="brushProportion">
|
||||
<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"/>
|
||||
<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>
|
||||
@@ -843,7 +847,7 @@ export default defineComponent({
|
||||
}else{
|
||||
cropper.getCropData(async (value:any) => {
|
||||
// 转换为File对象
|
||||
if(this.printObject.templateId){
|
||||
if(this.printObject.templateId || this.printObject.id){
|
||||
this.printObject.id = this.printObject.relationId
|
||||
this.confrimSubmit()
|
||||
}else{
|
||||
@@ -853,6 +857,7 @@ export default defineComponent({
|
||||
this.customRequest().then((rv:any)=>{
|
||||
this.isShowMark = false
|
||||
this.printObject.id = rv.id
|
||||
this.printObject.url = rv.url
|
||||
this.confrimSubmit()
|
||||
}).catch((res:any)=>{
|
||||
this.isShowMark = false
|
||||
@@ -879,13 +884,13 @@ export default defineComponent({
|
||||
"type": this.printObject.designType,
|
||||
// "waistbandLeft": [],
|
||||
// "waistbandRight": []
|
||||
...await this.getPrintLocation()
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.modifyProportion, data).then(
|
||||
(rv: any) => {
|
||||
// this.getImgDetail(url)
|
||||
this.printObject.rv
|
||||
this.printObject.url = rv
|
||||
this.option.img = rv
|
||||
this.setProportion(false)
|
||||
this.isShowMark = false
|
||||
}
|
||||
@@ -920,6 +925,30 @@ export default defineComponent({
|
||||
cropper.changeScale(num);
|
||||
},
|
||||
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'
|
||||
if(this.userDetail.userId == 88 || this.userDetail.userId == 83){
|
||||
modelType = this.modelType
|
||||
@@ -930,6 +959,8 @@ export default defineComponent({
|
||||
modelType:modelType,
|
||||
modelSex:this.sex,
|
||||
checkMd5:1,
|
||||
modelPath:getMinioUrl(this.printObject.url),
|
||||
isCovered,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...await this.getPrintLocation()
|
||||
}
|
||||
@@ -1080,6 +1111,7 @@ export default defineComponent({
|
||||
async setProportion(boolean:any){
|
||||
this.brushProportion = boolean
|
||||
if(boolean){
|
||||
this.slider = 50
|
||||
let url
|
||||
if(this.printObject.url){
|
||||
url = this.printObject.url
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<!-- <div class="text">Style：</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="text">Style：</div>
|
||||
<div class="generalModel_state" style="width: 20rem;">
|
||||
<div class="text" v-show="systemUser">Style：</div>
|
||||
<div class="generalModel_state" style="width: 20rem;" v-show="systemUser">
|
||||
<div class="generalModel_state_item" style="margin: 0; width: 100%;">
|
||||
<a-select
|
||||
v-model:value="selectObject.style"
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<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>
|
||||
</div>
|
||||
@@ -37,7 +37,7 @@
|
||||
<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-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 class="uploadBox">
|
||||
<div class="upload" v-if="!systemUser">
|
||||
@@ -69,6 +69,7 @@ import { useI18n } from 'vue-i18n'
|
||||
import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
|
||||
import edit from './edit.vue';
|
||||
import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
|
||||
import { Item } from 'ant-design-vue/lib/menu';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
habitSetStyle,edit
|
||||
@@ -84,14 +85,14 @@ export default defineComponent({
|
||||
modelList:[],
|
||||
systemUser:true,
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
mannequinStyleList:[],
|
||||
mannequinStyleList:[] as any,
|
||||
mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
|
||||
})
|
||||
watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
|
||||
if(newValue != oldValue){
|
||||
data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
|
||||
data.mannequinStyleList.unshift({
|
||||
name:'No style',
|
||||
name:'All',
|
||||
value:'',
|
||||
id:'',
|
||||
})
|
||||
@@ -210,42 +211,30 @@ export default defineComponent({
|
||||
Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
|
||||
(rv: any) => {
|
||||
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)=>{
|
||||
// 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(()=>{
|
||||
getModel()
|
||||
})
|
||||
@@ -262,7 +251,8 @@ export default defineComponent({
|
||||
beforeUpload,
|
||||
fileUploadChange,
|
||||
getModel,
|
||||
deleteSinglePic
|
||||
deleteSinglePic,
|
||||
addSystemToUser
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
@@ -334,6 +324,7 @@ export default defineComponent({
|
||||
> .item{
|
||||
width: 25rem;
|
||||
height: 55rem;
|
||||
max-height: 100%;
|
||||
margin: auto 0;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
@@ -390,8 +381,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
> .uploadBox{
|
||||
padding-left: 2rem;
|
||||
right: .5rem;
|
||||
padding: 0 2rem;
|
||||
right: 0;
|
||||
position: sticky;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="threeDownPage" ref="threeDownPage">
|
||||
<!-- height="65rem" -->
|
||||
<a-modal class="generalModel"
|
||||
v-model:visible="threeDown"
|
||||
:footer="null"
|
||||
width="77rem"
|
||||
height="65rem"
|
||||
height="35rem"
|
||||
:maskClosable="false"
|
||||
:mask="false"
|
||||
:mask="true"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:get-container="() => $refs.threeDownPage"
|
||||
@@ -24,7 +25,7 @@
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; height: 100%;">
|
||||
<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 class="content">
|
||||
<div class="downItem" v-for="item,key in loadList">
|
||||
@@ -37,7 +38,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@@ -84,6 +85,8 @@ export default defineComponent({
|
||||
})
|
||||
const cancelDsign = ()=>{
|
||||
data.threeDown = false;
|
||||
data.select.sizeType = ''
|
||||
data.select.size = ''
|
||||
}
|
||||
const getDowList = (id:any)=>{
|
||||
data.isShowMark = true
|
||||
@@ -104,11 +107,13 @@ export default defineComponent({
|
||||
let value = {
|
||||
...data.select,
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
|
||||
console.log(res)
|
||||
//anchor 标签下载
|
||||
let config = {
|
||||
params:value
|
||||
}
|
||||
|
||||
Https.axiosGet(Https.httpUrls.downloadZip,config).then((res:any)=>{
|
||||
let a = document.createElement('a');
|
||||
a.href = res.url;
|
||||
a.href = res;
|
||||
a.download = 'model.zip'; // 设置下载的文件名
|
||||
a.click(); // 触发下载
|
||||
URL.revokeObjectURL(a.href); // 释放 URL 对象
|
||||
@@ -126,6 +131,7 @@ export default defineComponent({
|
||||
data.select.sizeType = key
|
||||
data.select.size = DSizeItem
|
||||
}
|
||||
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
@@ -142,21 +148,36 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-modal-mask){
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
.threeDownPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
:deep(.generalModel){
|
||||
.gallery_btn{
|
||||
&.btnActive{
|
||||
pointer-events: none;
|
||||
background: rgba(0, 0, 0, .4);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding-left: 6rem;
|
||||
// width: 55rem;
|
||||
// margin: 0 auto;
|
||||
|
||||
> .downItem{
|
||||
display: flex;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
align-items:center;
|
||||
> .title{
|
||||
margin-right: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="patternMaking3D">
|
||||
<div class="selectModel">
|
||||
<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)">
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
|
||||
<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
|
||||
</div>
|
||||
<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
|
||||
<threeBox v-if="imgOrThree" ref="threeBox"></threeBox>
|
||||
</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>
|
||||
@@ -76,6 +76,7 @@ export default defineComponent({
|
||||
pageSize:10,
|
||||
imgOrThree:false,
|
||||
isFront:false,
|
||||
maskShow:false,
|
||||
})
|
||||
const setSelectModel = (item:any)=>{
|
||||
data.isShowMark = true
|
||||
@@ -104,6 +105,9 @@ export default defineComponent({
|
||||
let id = store.state.HomeStoreModule.patternMaking3D
|
||||
if(id && data.selectModel.id == -1)setSelectModel({id})
|
||||
})
|
||||
setTimeout(()=>{
|
||||
data.maskShow = true
|
||||
},500)
|
||||
}
|
||||
const getModelList = ()=>{
|
||||
if(data.isShowMark && !data.isNoData)return
|
||||
@@ -219,6 +223,7 @@ export default defineComponent({
|
||||
width: calc(100% / 4 - 1rem);
|
||||
margin: .5rem;
|
||||
aspect-ratio: 1 / 1.2;
|
||||
// height: 10rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #D4D4D4;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -125,10 +125,10 @@ export default defineComponent({
|
||||
floorMesh.rotation.x = -0.5 * Math.PI;
|
||||
floorMesh.receiveShadow = true;
|
||||
floorMesh.position.y = -0.001;
|
||||
data.scene.add(floorMesh);
|
||||
// data.scene.add(floorMesh);
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
// 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;
|
||||
|
||||
let openModel = (event:any)=>{
|
||||
@@ -213,7 +213,7 @@ export default defineComponent({
|
||||
//添加图片材质
|
||||
data.load.state = true
|
||||
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) => {
|
||||
// 3. 配置纹理参数
|
||||
texture.wrapS = THREE.RepeatWrapping;
|
||||
@@ -226,7 +226,7 @@ export default defineComponent({
|
||||
const newMaterial = new THREE.MeshStandardMaterial({
|
||||
map: texture, // 基础颜色贴图
|
||||
roughness: 0.7, // 表面粗糙度 (0-1)
|
||||
metalness: 0.2, // 金属质感 (0-1)
|
||||
metalness: .2, // 金属质感 (0-1)
|
||||
side: THREE.DoubleSide // 双面渲染
|
||||
});
|
||||
console.log(child)
|
||||
|
||||
@@ -2,19 +2,21 @@
|
||||
<div class="poseTransfer">
|
||||
<div class="configuratioBox" :class="{active:button.left}">
|
||||
<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">
|
||||
<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
|
||||
<div class="selectImg">
|
||||
<div class="head">
|
||||
<div class="text">Current</div>
|
||||
<div class="text">Choose design to transfer</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)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
|
||||
<img :src="item.imgUrl || item.url" alt="">
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
<div class="upload_item item">
|
||||
<div class="upload_file_item">
|
||||
@@ -46,45 +48,50 @@
|
||||
</div>
|
||||
<div class="poses">
|
||||
<div class="head">
|
||||
<div class="text">Target poses</div>
|
||||
<div class="text">Choose pose</div>
|
||||
</div>
|
||||
<div class="imgBox">
|
||||
<div class="item" v-for="item in currentList">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
<div class="imgBox" v-mousewheel>
|
||||
<div class="item" v-for="item in poseList" @click="selectPose(item)">
|
||||
<img :src="item.firstFrame"
|
||||
alt=""
|
||||
@mouseenter.stop="gifPlay($event,item)"
|
||||
@mouseleave.stop="gifPause($event,item)"
|
||||
>
|
||||
<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate">
|
||||
<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
|
||||
<div class="generate input_border">
|
||||
<div class="generage_btn started_btn" v-show="!isGenerate" @click="getgenerate">
|
||||
{{ $t('Generate.Generate') }}
|
||||
</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>
|
||||
</div>
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
|
||||
<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
|
||||
{{$t('Generate.Close')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="likeBox">
|
||||
<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">
|
||||
<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
|
||||
</div>
|
||||
<div class="btnLeft" @click="setSize('left')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
||||
</div>
|
||||
<div class="btnRight" @click="setSize('right')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
||||
<!-- <div class="btnLeft" @click="setSize('left')" :class="{'active':button.left}">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div> -->
|
||||
<div class="btnRight" @click="setSize('right')" :class="{'active':button.right}">
|
||||
<span class="icon iconfont icon-xiala"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noLikeBox" :class="{active:button.right}">
|
||||
<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">
|
||||
<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
|
||||
</div>
|
||||
@@ -134,10 +141,13 @@ export default defineComponent({
|
||||
},
|
||||
waitList:[],
|
||||
likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
|
||||
noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
|
||||
noLikeList:[],
|
||||
isGenerate:false,//判断是否正在进行generate
|
||||
remGenerate:false,
|
||||
removeGenerate:false,
|
||||
generateTime:null as any,
|
||||
poseList:[],
|
||||
selectPose:null as any,
|
||||
})
|
||||
const setIsShowMark:any = inject('setIsShowMark')
|
||||
const dataDom = reactive({
|
||||
@@ -145,14 +155,33 @@ export default defineComponent({
|
||||
generalDragRight:null as any,
|
||||
scaleVideo:null as any,
|
||||
})
|
||||
const selectImgItem = (item:any)=>{
|
||||
const selectImgItem = (item:any,)=>{
|
||||
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 = ()=>{
|
||||
// dataDom.generalDrag.openSetData()
|
||||
data.currentList = store.state.UploadFilesModule.modularData.toProduct
|
||||
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)=>{
|
||||
data.button[str] = !data.button[str]
|
||||
@@ -173,7 +202,7 @@ export default defineComponent({
|
||||
data.remGenerate = true
|
||||
},10000)
|
||||
let value = {
|
||||
poseId:1,
|
||||
poseId:data.selectPose,
|
||||
projectId:store.state.Workspace.probjects.id,
|
||||
productImage:data.selectImg.minioUrl,
|
||||
}
|
||||
@@ -187,11 +216,11 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
const setGenerate = (dataList:any)=>{
|
||||
let list = dataList
|
||||
let list:any = dataList
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
data.generateTime = setInterval(()=>{
|
||||
if(!data.isGenerate || data.remGenerate)return
|
||||
if(!data.isGenerate || !data.remGenerate)return
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
|
||||
@@ -205,11 +234,15 @@ export default defineComponent({
|
||||
element.url = element.firstFrameUrl
|
||||
let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
|
||||
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
|
||||
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){
|
||||
message.info(t('Generate.effectPoor'));
|
||||
}else{
|
||||
@@ -224,6 +257,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
data.noLikeList = data.noLikeList.filter((item:any)=>item.taskId != list)
|
||||
clearInterval(data.generateTime)
|
||||
clearInterval(data.remGenerateTime)
|
||||
data.isGenerate = false
|
||||
@@ -276,6 +310,8 @@ export default defineComponent({
|
||||
if(res.errCode == 0){
|
||||
file.imgUrl = res.data.url;
|
||||
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.type = 'ProductElement'
|
||||
// if(props.productimgMenu.value == 'Relight'){
|
||||
@@ -308,6 +344,7 @@ export default defineComponent({
|
||||
if(item.id == id){
|
||||
if(str == 'zoom'){
|
||||
showViewVideo({url:item.videoUrl})
|
||||
|
||||
}else if(str == 'like'){
|
||||
likeFile(item,'like',index)
|
||||
}
|
||||
@@ -353,8 +390,13 @@ export default defineComponent({
|
||||
).catch(res=>{
|
||||
});
|
||||
}
|
||||
const selectPose = (item:any)=>{
|
||||
item.isChecked = true
|
||||
data.selectPose = item?.id || 1
|
||||
data.poseList.forEach((listItem:any)=>listItem.isChecked = false)
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
// showViewVideo({url:'https://www.minio.aida.com.hk:12025/api/v1/download-shared-object/aHR0cHM6Ly93d3cubWluaW8uYWlkYS5jb20uaGs6MTIwMjQvYWlkYS11c2Vycy84OS9wb3NlX3RyYW5zZm9ybV92aWRlby8xMjMtODkubXA0P1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9N0tOVDdNWlNLWkRXM1RVOEJZVlklMkYyMDI1MDQwOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTA0MDhUMDUxOTM1WiZYLUFtei1FeHBpcmVzPTQzMTk5JlgtQW16LVNlY3VyaXR5LVRva2VuPWV5SmhiR2NpT2lKSVV6VXhNaUlzSW5SNWNDSTZJa3BYVkNKOS5leUpoWTJObGMzTkxaWGtpT2lJM1MwNVVOMDFhVTB0YVJGY3pWRlU0UWxsV1dTSXNJbVY0Y0NJNk1UYzBOREV4T0RneE9Td2ljR0Z5Wlc1MElqb2lZV1J0YVc0aWZRLmY0Z3RoTU1BeC1GUnM3eGhWNFdjTUFCUW5lU19BVkIxUDlYbnJQbEFNWUFsVnJwY3RpYXgtU2cyY2FkZHZ0a0VCOU1NbWxGeUlIbU90aGhUWDlqN2lnJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZ2ZXJzaW9uSWQ9bnVsbCZYLUFtei1TaWduYXR1cmU9Yjg5YmQ4ZDg5M2I4ZjBjYmYxZDI3NDFjZmY0NGRiZGNmYWM2NmU0ZGM2OGIwYzQzZDA2OGI4YjYzZjE5YjhhOA'})
|
||||
})
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
@@ -363,6 +405,8 @@ export default defineComponent({
|
||||
selectImgItem,
|
||||
setSize,
|
||||
setItemPosition,
|
||||
gifPlay,
|
||||
gifPause,
|
||||
getgenerate,
|
||||
getUploadUrl,
|
||||
beforeUpload,
|
||||
@@ -370,8 +414,24 @@ export default defineComponent({
|
||||
removeGenerate,
|
||||
likeSetBtn,
|
||||
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() {
|
||||
return {
|
||||
}
|
||||
@@ -390,22 +450,27 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-right: 3.8rem;
|
||||
&.active{
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .generate{
|
||||
margin-top: auto;
|
||||
margin-left: auto;
|
||||
> .started_btn{
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .configuratioBox > .configuratio{
|
||||
padding-right: 3.8rem;
|
||||
width: 31.8rem;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
// font-size: 2.6rem;
|
||||
}
|
||||
> .content{
|
||||
margin-top: 4rem;
|
||||
// margin-top: 4rem;
|
||||
margin-top: 1.8rem;
|
||||
> .selectImg,> .poses{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -414,24 +479,29 @@ export default defineComponent({
|
||||
max-height: 45rem;
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
> .item{
|
||||
margin-right: 1rem;
|
||||
width: calc(100% / 2 - .5rem);
|
||||
margin-bottom: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #8e8e8e;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
height: 25rem;
|
||||
&.active{
|
||||
border: 2px solid;
|
||||
position: relative;
|
||||
// &.active{
|
||||
// border: 2px solid;
|
||||
// }
|
||||
:deep(.ant-checkbox-wrapper){
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
@@ -447,29 +517,11 @@ export default defineComponent({
|
||||
font-weight: 600;
|
||||
> .text{
|
||||
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{
|
||||
margin-top: 3rem;
|
||||
}
|
||||
@@ -504,8 +556,12 @@ export default defineComponent({
|
||||
>span{
|
||||
transition: all .3s;
|
||||
transform: rotate(90deg);
|
||||
&.active{
|
||||
|
||||
}
|
||||
&.active{
|
||||
>span{
|
||||
transform: rotate(270deg);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -521,6 +577,11 @@ export default defineComponent({
|
||||
}
|
||||
> .title{
|
||||
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">
|
||||
<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
|
||||
</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_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" >
|
||||
<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>
|
||||
@@ -117,6 +63,59 @@
|
||||
</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_imgBox generalScroll upload_item">
|
||||
|
||||
@@ -142,7 +141,7 @@
|
||||
<div class="productImg_right_item_box generalScroll">
|
||||
<div class="content_header_left">
|
||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||
{{ $t('HomeView.SelectedDesign') }}
|
||||
{{ $t('ProductImg.SelectedDesign') }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <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>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="btnLeft" @click="setSize('left')">
|
||||
|
||||
<!-- <div class="btnLeft" @click="setSize('left')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="btnRight" @click="setSize('right')">
|
||||
<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
|
||||
</div>
|
||||
@@ -188,12 +185,15 @@
|
||||
<div class="productImg_right_item_box right generalScroll">
|
||||
<div class="content_header_left">
|
||||
<i class="fi fi-rs-comments"></i><span class="content_header_des">
|
||||
{{ $t('HomeView.GeneratedDesign') }}
|
||||
{{ $t('ProductImg.productImageDrafts') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<generalDrag ref="generalDragRight" @setBtn="generateSetBtn" :list="generateList" :showMark="isShowMark"></generalDrag>
|
||||
</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" >
|
||||
<img :src="item.url" alt="">
|
||||
<div class="productImg_right_item_iconRight">
|
||||
@@ -272,7 +272,6 @@ export default defineComponent({
|
||||
ToProductImage:'',
|
||||
Relight:'',
|
||||
},
|
||||
isTextarea:false,//是否展开
|
||||
remProductimg:false,//是否出现取消按钮
|
||||
isProductimg:false,//开始生成
|
||||
selectProductimgList:[],
|
||||
@@ -329,7 +328,7 @@ export default defineComponent({
|
||||
});
|
||||
let userlikeGroupId = 0
|
||||
const openSetData = ()=>{
|
||||
cleardata()
|
||||
// cleardata()
|
||||
if(props.productimgMenu.value == 'ToProductImage'){
|
||||
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(selectDesignList.value.design.likeData))
|
||||
}else if(props.productimgMenu.value == 'Relight'){
|
||||
@@ -340,6 +339,7 @@ export default defineComponent({
|
||||
}
|
||||
userlikeGroupId = selectDesignList.value.userlikeGroupId
|
||||
// getLikeProductImage(selectDesignList.value.userlikeGroupId)
|
||||
productImgDom.generalDragLeft.setItemPosition()
|
||||
}
|
||||
let setproduct = (value:any)=>{
|
||||
// props.productimgMenu = value
|
||||
@@ -719,6 +719,18 @@ export default defineComponent({
|
||||
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 {
|
||||
upload,
|
||||
driver__,
|
||||
@@ -749,10 +761,23 @@ export default defineComponent({
|
||||
generateSetBtn,
|
||||
setItemPosition,
|
||||
setSize,
|
||||
ifMaximumLength,
|
||||
};
|
||||
},
|
||||
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() {
|
||||
return {
|
||||
@@ -812,7 +837,7 @@ methods: {
|
||||
}
|
||||
}
|
||||
.productImg_content_bottom{
|
||||
height: calc(100% - 4rem - 2.4rem);
|
||||
height: 100%;
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -858,7 +883,8 @@ methods: {
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
height: 14rem;
|
||||
height: 36rem;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
img{
|
||||
height: 100%;
|
||||
@@ -866,10 +892,8 @@ methods: {
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
opacity: .5;
|
||||
transform: scale(.9);
|
||||
&.active{
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.ant-checkbox-wrapper{
|
||||
@@ -918,7 +942,7 @@ methods: {
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
padding-right: 3.8rem;
|
||||
width: 31.8rem;
|
||||
width: 39rem;
|
||||
&.active{
|
||||
width: 0;
|
||||
padding: 0;
|
||||
@@ -931,14 +955,17 @@ methods: {
|
||||
width: 9rem;
|
||||
border: none !important;
|
||||
&.upload_file_item:last-child{
|
||||
width: 9rem;
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
// width: 45%;
|
||||
.productImg_content_item_imgBox{
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 3rem;
|
||||
.content_item_imgBox_itemImg{
|
||||
width: auto;
|
||||
max-width: 9rem;
|
||||
max-width: 20rem;
|
||||
flex-shrink: 0;
|
||||
img{
|
||||
object-fit: contain;
|
||||
@@ -946,16 +973,18 @@ methods: {
|
||||
}
|
||||
.upload_file_item{
|
||||
flex-shrink: 0;
|
||||
width: 9rem;
|
||||
width: 36rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate{
|
||||
--width:100%;
|
||||
padding-bottom: 1rem;
|
||||
// margin-top: auto;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 3rem;
|
||||
.system_silder{
|
||||
flex: 1;
|
||||
}
|
||||
@@ -965,6 +994,7 @@ methods: {
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_Direction{
|
||||
@@ -986,7 +1016,6 @@ methods: {
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
.input_box{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<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>
|
||||
<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>
|
||||
@@ -15,6 +15,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import workspace from '../../workflow/workspace.vue'
|
||||
import seriesDesign from './seriesDesign.vue'
|
||||
import printDesign from './printDesign.vue'
|
||||
import singleProductDesign from './singleProductDesign.vue'
|
||||
@@ -27,7 +28,7 @@ import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
|
||||
workspace,seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
|
||||
},
|
||||
props:{
|
||||
selectKey_:String,
|
||||
@@ -89,6 +90,7 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
const saveProject = (str:any)=>{
|
||||
if(str == 'design')return
|
||||
let value:any = {
|
||||
projectId:data.selectObject.id,
|
||||
}
|
||||
@@ -97,7 +99,7 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
store.dispatch('getProjectData',str).then((data)=>{
|
||||
if(!data[str])return
|
||||
// if(!data[str])return
|
||||
value[str] = data[str]
|
||||
|
||||
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
||||
@@ -205,10 +207,14 @@ export default defineComponent({
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
&.active{
|
||||
overflow: initial;
|
||||
}
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
overflow-x: initial;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
|
||||
@@ -80,7 +80,7 @@ export default defineComponent({
|
||||
objectName:data.selectObject.type,
|
||||
}
|
||||
let arr = ['sketchBoard','moodBoard','printBoard','colorBoard']
|
||||
if(arr.indexOf(item) != -1){
|
||||
if(arr.indexOf(item) > -1){
|
||||
store.dispatch('setAllBoardData',value)
|
||||
}else{
|
||||
store.dispatch('setModularData',value)
|
||||
|
||||
@@ -102,11 +102,11 @@ export default defineComponent({
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"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)=>{
|
||||
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']
|
||||
for (let index = 0; index < canvasData.length; 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);
|
||||
console.log(data.toProduct)
|
||||
if(data.toProduct){
|
||||
let value = {
|
||||
list: data.toProduct,
|
||||
@@ -268,6 +267,7 @@ export default defineComponent({
|
||||
}
|
||||
return newData;
|
||||
});
|
||||
console.log(colorList)
|
||||
return colorList;
|
||||
}
|
||||
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);
|
||||
if(data.toProduct){
|
||||
let value = {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="seriesDesign">
|
||||
<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>
|
||||
<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>
|
||||
@@ -17,12 +18,13 @@ import { useI18n } from 'vue-i18n'
|
||||
import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
|
||||
import deReconstruction from '../../model/deReconstruction/index.vue'
|
||||
import canvasUpload from "@/component/Canvas/index.vue";
|
||||
import mannequin from '../../model/mannequin/index.vue'
|
||||
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
export default defineComponent({
|
||||
components:{
|
||||
workspace,SketchboardUpload,deReconstruction,canvasUpload
|
||||
workspace,SketchboardUpload,deReconstruction,canvasUpload,mannequin
|
||||
},
|
||||
props:{
|
||||
selectKey_:{
|
||||
@@ -46,6 +48,7 @@ export default defineComponent({
|
||||
sketchBoard:null as any,
|
||||
deReconstruction:null as any,
|
||||
canvas:null as any,
|
||||
mannequin:null as any,
|
||||
})
|
||||
const open = (str:any)=>{
|
||||
nextTick(()=>{
|
||||
@@ -71,11 +74,11 @@ export default defineComponent({
|
||||
const getCollection = ()=>{
|
||||
let value:any = {
|
||||
"id":data.selectObject.id,
|
||||
"moduleList":["sketchBoard",'deReconstruction']
|
||||
"moduleList":["sketchBoard",'deReconstruction','mannequin']
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
|
||||
historyChooseData(rv)
|
||||
let allBoardData = ['sketchBoard','deReconstruction']
|
||||
let allBoardData = ['sketchBoard','deReconstruction','mannequin']
|
||||
let canvasData = ['deReconstruction','canvas']
|
||||
for (let index = 0; index < canvasData.length; index++) {
|
||||
const item = canvasData[index];
|
||||
|
||||
@@ -1,32 +1,35 @@
|
||||
<template>
|
||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
||||
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
||||
<div class="homeContent" ref="parent">
|
||||
<navListBox
|
||||
@setSelectKey=setSelectKey
|
||||
:navListData="navListData"
|
||||
:selectKey="selectKey"
|
||||
:workflowType="workflowType"
|
||||
v-model:isShowMark="isShowMark"
|
||||
></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back">
|
||||
<div class="title">
|
||||
{{ 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 class="workflowBox">
|
||||
<div class="workflow" v-show="isUpdataPorject || selectObject.id">
|
||||
<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
|
||||
<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
|
||||
<div class="homeContent" ref="parent">
|
||||
<navListBox
|
||||
@setSelectKey=setSelectKey
|
||||
:navListData="navListData"
|
||||
:selectKey="selectKey"
|
||||
:workflowType="workflowType"
|
||||
v-model:isShowMark="isShowMark"
|
||||
></navListBox>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="back">
|
||||
<div class="title">
|
||||
<i :class="[navListData?.find((item:any) => item.value === selectKey_)?.icon]"></i>
|
||||
{{ 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>
|
||||
<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
|
||||
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
<div v-if="!isUpdataPorject && !selectObject.id" class="workflow">
|
||||
<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -177,57 +180,69 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.workflow{
|
||||
.workflowBox{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
padding-top: 3rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
// background: #ff6666;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
> .workflow{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> .contentBox{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .content,
|
||||
>.homeContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4rem;
|
||||
padding-top: 3rem;
|
||||
// padding: 3rem;
|
||||
}
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
> .content{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(0);
|
||||
// background: #ff6666;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
flex-direction: column;
|
||||
> *{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
> .text{
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
> i{
|
||||
font-size: 3rem;
|
||||
> .back{
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding-bottom: 1rem;
|
||||
> .title{
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
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{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
> .homeContent{
|
||||
// background: #91ff66;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,7 +18,8 @@
|
||||
<!-- @click.stop="setSelect(item)" -->
|
||||
<div class="background"></div>
|
||||
<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 class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
|
||||
</div>
|
||||
@@ -117,7 +118,7 @@ export default defineComponent({
|
||||
&.printDesign{width: 8rem;height: 1.3rem;}
|
||||
&.printingDesign3D{width: 8rem;height: 1.3rem;}
|
||||
&.productDrawingDesign{width: 38rem;height: 23rem;}
|
||||
&.sketchDesign{width: 38rem;height: 1.3rem;}
|
||||
&.sketchDesign{width: 38rem;height: 23rem;}
|
||||
}
|
||||
> .navListItem{
|
||||
width: 22rem;
|
||||
@@ -131,6 +132,7 @@ export default defineComponent({
|
||||
transition: all .2s;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 2rem;
|
||||
&.seriesDesign{
|
||||
&.item1-1{top: -5rem;left: -22rem;}
|
||||
&.item1-2{top: 9rem;left: -22rem;}
|
||||
@@ -165,9 +167,10 @@ export default defineComponent({
|
||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||
}
|
||||
&.sketchDesign{
|
||||
&.item1-1{top: -2.5rem;left: -22rem;}
|
||||
&.item2-1{top: -2.5rem;left: 8rem;}
|
||||
&.item3-1{top: -2.5rem;left: 38rem;}
|
||||
&.item1-1{top: -5rem;left: -22rem;}
|
||||
&.item1-2{top: 18rem;left: -22rem;}
|
||||
&.item2-1{top: 6.5rem;left: 8rem;}
|
||||
&.item3-1{top: 6.5rem;left: 38rem;}
|
||||
}
|
||||
.background{
|
||||
// background: #e8e8e8;
|
||||
@@ -200,7 +203,7 @@ export default defineComponent({
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
box-shadow: #000 0px 0px 10px;
|
||||
box-shadow: #000 0px 0px 2px;
|
||||
border-radius: 1rem;
|
||||
> i{
|
||||
display: flex;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<div class="style marginBottom" v-if="show.style">
|
||||
<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>
|
||||
<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 class="complete">
|
||||
<div class="gallery_btn" @click="complete">Complete</div>
|
||||
@@ -133,8 +133,6 @@ export default defineComponent({
|
||||
// store.commit('setProbject',data)
|
||||
}
|
||||
const setprintModel = (value:any)=>{
|
||||
console.log(value);
|
||||
|
||||
data.selectObject.position = value
|
||||
}
|
||||
const formatter = (value: number)=>{
|
||||
@@ -151,13 +149,14 @@ export default defineComponent({
|
||||
let value = {
|
||||
name:data.selectObject.name,
|
||||
process:props.httpWorkflowType,
|
||||
styleId:data.show.style?data.selectObject.sylteId:null,
|
||||
styleId:data.show.style?data.selectObject.styleId:null,
|
||||
id:data.selectObject.id,
|
||||
workspace:{
|
||||
sex:data.selectObject.sex,
|
||||
// sex:data.show.gender?data.selectObject.sex:null,
|
||||
systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
|
||||
position:data.show.position?data.selectObject.position.value:'Overall',
|
||||
ageGroup:data.show.style?data.selectObject.ageGroup:null,
|
||||
// position:data.selectObject,
|
||||
} as any,
|
||||
|
||||
@@ -172,7 +171,7 @@ export default defineComponent({
|
||||
model = {
|
||||
id:rv.workspaceVO.mannequinFemaleId,
|
||||
type:rv.workspaceVO.mannequinFemaleType,
|
||||
url:rv.workspaceVO.malePresignedUrl,
|
||||
url:rv.workspaceVO.femalePresignedUrl,
|
||||
}
|
||||
position = store.state.UserHabit.FemalePosition
|
||||
}else{
|
||||
@@ -201,7 +200,7 @@ export default defineComponent({
|
||||
data.show.systemDesigner = (props.workflowType == 'seriesDesign' || 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)
|
||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
||||
(rv) => {
|
||||
|
||||
@@ -33,26 +33,7 @@
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
|
||||
<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
|
||||
</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">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
</div>
|
||||
@@ -93,6 +74,26 @@
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="productimgBrightenValue">
|
||||
</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="input_box">
|
||||
<div v-show="!productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
|
||||
@@ -524,6 +525,9 @@ export default defineComponent({
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
@@ -549,11 +553,11 @@ export default defineComponent({
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
// transform: translateY(100%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
margin-top: 0;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
padding-bottom: 2.4rem;
|
||||
@@ -576,7 +580,7 @@ export default defineComponent({
|
||||
img{
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 40rem;
|
||||
max-width: 50rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.active{
|
||||
@@ -584,7 +588,8 @@ export default defineComponent({
|
||||
img{
|
||||
// width: 50%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
}
|
||||
.img_operate_block{
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
<template>
|
||||
<div class="brandDetail">
|
||||
<div class="title">
|
||||
<div @click="back" class="back">< Back</div>
|
||||
<div>
|
||||
<div class="gallery_btn" @click="compute">Compute</div>
|
||||
<div>
|
||||
<a-progress :percent="100" size="small" :showInfo="false" />
|
||||
</div>
|
||||
</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="userDetail">
|
||||
<div class="logo">
|
||||
@@ -34,19 +28,25 @@
|
||||
</div>
|
||||
<div class="info">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="slogan">
|
||||
<div>Brand slonan:</div>
|
||||
<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
|
||||
<div>Slogan:</div>
|
||||
<span v-if="!isEditDescribe" style="font-weight: 300;">{{ brandSlogan }}</span>
|
||||
<input v-else type="text" v-model="brandSlogan">
|
||||
<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>
|
||||
</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 class="content">
|
||||
<div style="display: flex;">
|
||||
@@ -61,10 +61,12 @@
|
||||
>
|
||||
<div class="gallery_btn">Upload</div>
|
||||
</a-upload>
|
||||
<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">Delete</div>
|
||||
</div>
|
||||
<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="">
|
||||
<i class="fi fi-rr-trash icon_delete" @click="deleteSinglePic(item,index)"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
@@ -86,7 +88,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<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 { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
@@ -104,9 +106,11 @@ export default defineComponent({
|
||||
emits:['update:isShowMark','handleBack'],
|
||||
props: {
|
||||
isShowMark:{type:Boolean,default:false},
|
||||
selectCode:{type:String,default:''},
|
||||
},
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n();
|
||||
const data = reactive({
|
||||
cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
|
||||
uploadUrl:'',
|
||||
@@ -126,6 +130,12 @@ export default defineComponent({
|
||||
total:0,
|
||||
pageSize:10,
|
||||
currentPage:1,
|
||||
selectImgList:[] as any,//选择删除的图片
|
||||
getProgressTime:null as any,//获取进度的时间
|
||||
schedule:{
|
||||
num:0,
|
||||
state:false
|
||||
}
|
||||
})
|
||||
const dataDom = reactive({
|
||||
Cropper:null as any,
|
||||
@@ -233,6 +243,8 @@ export default defineComponent({
|
||||
data.brandSlogan = value.brandSlogan;
|
||||
data.logoUrl = value.minioUrl
|
||||
data.minioUrl = value.brandLogo
|
||||
clearInterval(data.getProgressTime)
|
||||
getProgress()
|
||||
getLibraryList()
|
||||
// emit("update:isShowMark",true)
|
||||
// setTimeout(()=>{
|
||||
@@ -240,6 +252,7 @@ export default defineComponent({
|
||||
// },2000)
|
||||
}
|
||||
const back = ()=>{
|
||||
clearInterval(data.getProgressTime)
|
||||
emit("handleBack")
|
||||
}
|
||||
const uploadBrand = ()=>{
|
||||
@@ -255,12 +268,90 @@ export default defineComponent({
|
||||
})
|
||||
}
|
||||
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)=>{
|
||||
data.currentPage = current
|
||||
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{
|
||||
...toRefs(dataDom),
|
||||
...toRefs(data),
|
||||
@@ -274,6 +365,9 @@ export default defineComponent({
|
||||
editChek,
|
||||
compute,
|
||||
changePage,
|
||||
deleteBatchPic,
|
||||
deleteSinglePic,
|
||||
selectImg,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -299,12 +393,16 @@ export default defineComponent({
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
margin-left: -2rem;
|
||||
}
|
||||
}
|
||||
> .userDetail{
|
||||
display: flex;
|
||||
margin-top: 4rem;
|
||||
margin-top: 2rem;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
> .logo{
|
||||
position: relative;
|
||||
margin-right: 3rem;
|
||||
@@ -386,12 +484,32 @@ export default defineComponent({
|
||||
> .imgItem{
|
||||
width: 100px;
|
||||
margin: 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1 / 2.5;
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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{
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<input type="text" v-model="brandName">
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class="item">
|
||||
@@ -73,12 +73,12 @@
|
||||
<div class="right">
|
||||
<div class="item">
|
||||
<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 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">
|
||||
<i class="fi fi-br-loading"></i>
|
||||
<span class="fi fi-br-loading"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -352,6 +352,29 @@ export default defineComponent({
|
||||
width: 100%;
|
||||
> .gallery_btn{
|
||||
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,
|
||||
},
|
||||
})
|
||||
let portfolio:any = inject('portfolio')
|
||||
// let portfolio:any = inject('portfolio')
|
||||
|
||||
// let setPortfolio:any = inject('setPortfolio')
|
||||
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! '},
|
||||
|
||||
@@ -10,21 +10,28 @@
|
||||
>
|
||||
|
||||
<img v-if="item.url"
|
||||
:class="[isVideo?'video':'']"
|
||||
@mouseenter.stop="gifPlay($event,item)"
|
||||
@mouseleave.stop="gifPause($event,item)"
|
||||
:src="item.url"
|
||||
alt=""
|
||||
>
|
||||
<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')">
|
||||
<i class="fi fi-rr-heart"></i>
|
||||
</div>
|
||||
<div class="btn down" v-if="isVideo" @click.stop="down(item)">
|
||||
<i class="fi fi-rr-heart"></i>
|
||||
</div>
|
||||
<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
<div class="btn">
|
||||
<div class="like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
|
||||
<i class="fi fi-rr-heart"></i>
|
||||
</div>
|
||||
<div class="down" v-if="isVideo && item.url" @click.stop="down(item)">
|
||||
<i class="fi fi-ss-down-to-line"></i>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
@@ -53,21 +60,21 @@ export default defineComponent({
|
||||
generalDragDom:null as any,
|
||||
})
|
||||
const collItemSize = reactive({
|
||||
collValue:15,
|
||||
minCollValue:2,
|
||||
maxCollValue:20,
|
||||
collValue:18,
|
||||
num:2,
|
||||
padding:40,
|
||||
likeStyle:{
|
||||
width:'100px',
|
||||
width:'0px',
|
||||
// width:'240px',
|
||||
height:'200px',
|
||||
height:'0px',
|
||||
// height:'370px',
|
||||
position:'absolute',
|
||||
},
|
||||
itemStyle:{
|
||||
width:100,
|
||||
height:154,
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
scale:[1,1.54],
|
||||
scale:[1,1.539],
|
||||
collTime:null as any,
|
||||
isMove:false,
|
||||
elList:[] as any,
|
||||
@@ -138,11 +145,11 @@ export default defineComponent({
|
||||
// })
|
||||
}
|
||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||
dataDom.generalDragDom
|
||||
let elList:any = collItemSize.elList
|
||||
let index = data.selectIndex
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
let width,height,num
|
||||
num = value
|
||||
num = collItemSize.num
|
||||
width = collItemSize.itemStyle.width
|
||||
height = collItemSize.itemStyle.height
|
||||
|
||||
@@ -170,10 +177,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
const moveItem = ()=>{
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
let value = collItemSize.num
|
||||
// let num = str == 'like'?value:3
|
||||
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';
|
||||
}
|
||||
|
||||
@@ -181,10 +188,11 @@ export default defineComponent({
|
||||
const setItemPosition = ()=>{
|
||||
let parent = dataDom.generalDragDom.offsetWidth
|
||||
let elArr = dataDom.generalDragDom.children
|
||||
let value = collItemSize.maxCollValue - collItemSize.collValue
|
||||
collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
|
||||
let value = collItemSize.num
|
||||
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
||||
collItemSize.itemStyle.width = (parent - collItemSize.padding - ((value-1)*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.height = collItemSize.itemStyle.height + 'px'
|
||||
collItemSize.elList = []
|
||||
@@ -242,22 +250,31 @@ export default defineComponent({
|
||||
e.target.src = item.url//静态图片
|
||||
// e.target.src = ''//静态图片
|
||||
}
|
||||
const down = (item:any)=>{
|
||||
const down = async (item:any)=>{
|
||||
const videoUrl = item.videoUrl; // 视频文件 URL
|
||||
const fileName = 'video.mp4'; // 下载时保存的文件名
|
||||
const response = await fetch(videoUrl);
|
||||
const blob = await response.blob();
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = videoUrl;
|
||||
link.download = fileName;
|
||||
const a = document.createElement('a');
|
||||
a.href = blobUrl;
|
||||
a.download = 'video.mp4';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
|
||||
// 触发下载
|
||||
link.click();
|
||||
// 清理
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(blobUrl);
|
||||
}, 100);
|
||||
}
|
||||
onMounted(()=>{
|
||||
window.addEventListener('resize', setItemPosition)
|
||||
// nextTick(()=>{
|
||||
// setItemPosition()
|
||||
// })
|
||||
nextTick(()=>{
|
||||
let width = (dataDom.generalDragDom.offsetWidth - collItemSize.padding) / collItemSize.num
|
||||
collItemSize.likeStyle.width = width + 'px'
|
||||
collItemSize.likeStyle.height = width * 1.54 + 'px'
|
||||
})
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
window.removeEventListener('resize', setItemPosition)
|
||||
@@ -288,38 +305,57 @@ export default defineComponent({
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
> .item{
|
||||
border-radius: 2rem;
|
||||
border: 2px solid;
|
||||
// border-radius: 2rem;
|
||||
// border: 2px solid;
|
||||
position: absolute;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
&.video{
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .btn{
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
top: 1rem;
|
||||
cursor: pointer;
|
||||
right: 2rem;
|
||||
display: none;
|
||||
&.like{
|
||||
left: 2rem;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,.5);
|
||||
> div{
|
||||
padding: .8rem;
|
||||
&:hover{
|
||||
background: rgba(255,255,255,.7);
|
||||
}
|
||||
}
|
||||
&.zoom{
|
||||
right: 2rem;
|
||||
.like{
|
||||
}
|
||||
>i{
|
||||
.zoom{
|
||||
i{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.down{
|
||||
}
|
||||
.delete{
|
||||
}
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
> .btn{
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
v-model:visible="liqufeaction"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.liquefactionModal"
|
||||
width="78%"
|
||||
width="80%"
|
||||
height="90%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
@@ -16,8 +17,8 @@
|
||||
<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">
|
||||
<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="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" 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="#000"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
@@ -30,6 +31,10 @@
|
||||
<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div>
|
||||
</div>
|
||||
<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_title">
|
||||
<span>{{ $t('exportModel.Size') }}</span>
|
||||
@@ -48,12 +53,9 @@
|
||||
<input type="range" v-model="density" @change="routesChange('density')">
|
||||
</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="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>
|
||||
</div>
|
||||
@@ -406,16 +408,29 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.liquefactionModal{
|
||||
:deep(.liquefaction){
|
||||
.ant-modal-mask{
|
||||
background: rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.liquefaction {
|
||||
background: #f9fafb;
|
||||
.generalModel_btn{
|
||||
.generalModel_closeIcon{
|
||||
transform: translate(-100%, 100%);
|
||||
}
|
||||
}
|
||||
.liquefaction_center{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.liquefaction_canvas_box{
|
||||
background: #fff;
|
||||
height: 90%;
|
||||
width: 80%;
|
||||
width: 55%;
|
||||
text-align: center;
|
||||
// overflow-x: auto;
|
||||
position: relative;
|
||||
@@ -426,9 +441,11 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
}
|
||||
.liquefaction_parameter{
|
||||
padding-top: 5rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.liquefaction_parameter_item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -455,7 +472,7 @@ export default defineComponent({
|
||||
border-radius: .5rem;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid #000;
|
||||
// border: 2px solid #000;
|
||||
margin-right: 1rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
CanvasTool:'画布工具',
|
||||
Color:'颜色',
|
||||
Size:'大小',
|
||||
Brushwork:'绘画',
|
||||
Brushwork:'笔触',
|
||||
Texture:'材质',
|
||||
FillBack:'填充 & 边',
|
||||
Layer:'层级',
|
||||
@@ -155,9 +155,10 @@ export default {
|
||||
Reset:'重置',
|
||||
Design:'设计',
|
||||
Redesign:'重新设计',
|
||||
GeneratedDesign:'生成设计，请选择您最喜欢的设计',
|
||||
GeneratedDesign:'设计草稿',
|
||||
elementTitle:'设计素材',
|
||||
recycleBin:'回收站',
|
||||
SelectedDesign:'喜欢的设计',
|
||||
SelectedDesign:'设计集',
|
||||
Export:'导出',
|
||||
moodboard:"情绪板",
|
||||
printboard:"印刷板",
|
||||
@@ -178,13 +179,17 @@ export default {
|
||||
jsContent10:"二次创作的作品不允许使用'设计'，但是您可以使用'重新设计'",
|
||||
},
|
||||
ProductImg:{
|
||||
productInput:'输入关键词（例如风格、材质）',
|
||||
relightInput:'输入关键词（例如场景、地点）',
|
||||
Finalize:'完成',
|
||||
SelectCollection:'选择的系列',
|
||||
SelectCollection:'选择要转换的图片',
|
||||
SelectedDesign:'产品图集',
|
||||
productImageDrafts:'产品图草稿',
|
||||
Upload:'上传',
|
||||
MagicTools:'转换产品图工具',
|
||||
relightingTool:'打光工具',
|
||||
Similarity:'相似度',
|
||||
Highlight:'高亮',
|
||||
Highlight:'曝光强度',
|
||||
RelightDirection:'打光方向',
|
||||
GenerateProduct:'生成的产品',
|
||||
SelectedProduct:'选择的产品',
|
||||
@@ -199,6 +204,9 @@ export default {
|
||||
Clear:'清空',
|
||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
||||
jsContent2:'请至少选择一张图片',
|
||||
},
|
||||
poseTransfer:{
|
||||
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'整理',
|
||||
@@ -247,6 +255,8 @@ export default {
|
||||
jsContent7:'请输入内容~',
|
||||
jsContent8:'上传失败',
|
||||
jsContent9:'选择一张图片~',
|
||||
jsContent10:'是否另存为当前模特？',
|
||||
jsContent11:'你确定删除当前品牌DNA吗？',
|
||||
},
|
||||
HistoryPage:{
|
||||
History:'历史',
|
||||
@@ -360,7 +370,7 @@ export default {
|
||||
jsContent4:"请选择一张图片",
|
||||
jsContent5:"输入的内容超过允许输入的最大长度",
|
||||
jsContent6:"请输入内容~",
|
||||
jsContent7:"请检查*号内容",
|
||||
jsContent7:"请确保所有必填项都填妥",
|
||||
},
|
||||
ColorboardUpload:{
|
||||
Thumbnail:'选择的颜色缩略图',
|
||||
@@ -368,7 +378,7 @@ export default {
|
||||
Palette:'调色板',
|
||||
HEX:'HEX',
|
||||
RGBA:'RGBA',
|
||||
UploadImage:'上传图片',
|
||||
UploadImage:'提取主色',
|
||||
ColorCode:'颜色代码',
|
||||
SelectSuccessively:'连选',
|
||||
SelectSuccessivelyOnTitle:'连续选色模式开启.',
|
||||
@@ -388,7 +398,7 @@ export default {
|
||||
jsContent6:"请至少选择一个情绪版或者印花",
|
||||
},
|
||||
selectImgList:{
|
||||
SelectImg:'选择图片',
|
||||
SelectImg:'选择图片来提取主色',
|
||||
Clear:'关闭',
|
||||
},
|
||||
MoodboardUpload:{
|
||||
@@ -438,7 +448,7 @@ export default {
|
||||
Model1:'笔墨画风',
|
||||
Model2:'插画画风',
|
||||
Model3:'真实画风',
|
||||
inputContent1:'输入生成图片的标题',
|
||||
inputContent1:'输入生成图片的提示词',
|
||||
Generate:'生成',
|
||||
Sequence:'队列',
|
||||
Close:'取消',
|
||||
@@ -493,7 +503,7 @@ export default {
|
||||
CurrentElements:'当前元素',
|
||||
},
|
||||
DesignDetailAlter:{
|
||||
current:'当前',
|
||||
current:'项目',
|
||||
Upload:'上传',
|
||||
Library:'收藏',
|
||||
inputContent1:'输入名字进行搜索',
|
||||
@@ -560,16 +570,16 @@ export default {
|
||||
NewYear_2025:'新年 2025',
|
||||
},
|
||||
Publish:{
|
||||
Publish:'发布',
|
||||
Publish:'发布到作品广场',
|
||||
CoverPicture:'封面图',
|
||||
CollectionTitle:'系列名字',
|
||||
topic:'话题',
|
||||
Description:'描述',
|
||||
Permissions:'权限',
|
||||
PermissionsItem1:'允许其他用户进行二次创作。',
|
||||
Close:'关闭',
|
||||
Close:'取消',
|
||||
UpdatePublish:'更新发布',
|
||||
jsContent1:'如果您离开此页，您的更改将会丢失。您确定要离开这一页吗?',
|
||||
jsContent1:'您确定要离开这一页吗?你的更改没有被保存。',
|
||||
jsContent2:'请输入您的作品名称',
|
||||
jsContent3:'这将把您的作品发布到广场上，供所有用户查看。请确认是否发布?',
|
||||
jsContent4:'发布成功!你可以在我的作品中找到',
|
||||
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
CanvasTool:'Canvas Tool',
|
||||
Color:'Color',
|
||||
Size:'Size',
|
||||
Brushwork:'Brushwork',
|
||||
Brushwork:'Brush',
|
||||
Texture:'Texture',
|
||||
FillBack:'Fill & Border',
|
||||
Layer:'Layer',
|
||||
@@ -155,9 +155,10 @@ export default {
|
||||
Reset:'Reset',
|
||||
Design:'Design',
|
||||
Redesign:'Redesign',
|
||||
GeneratedDesign:'Generated Design，please choose your favorite design',
|
||||
GeneratedDesign:'Design Drafts',
|
||||
elementTitle:'Design Assets',
|
||||
recycleBin:'Recycle Bin',
|
||||
SelectedDesign:'Selected Design',
|
||||
SelectedDesign:'Design Collection',
|
||||
Export:'Export',
|
||||
moodboard:"moodboard",
|
||||
printboard:"printboard",
|
||||
@@ -178,11 +179,15 @@ export default {
|
||||
jsContent10:"Re-created works are not allowed to use 'design', but you can use 'redesign'",
|
||||
},
|
||||
ProductImg:{
|
||||
productInput:'Enter keywords (e.g. Style, Material)',
|
||||
relightInput:'Enter keywords (e.g. Scene, Location)',
|
||||
Finalize:'Finalize',
|
||||
SelectCollection:'Select Collection',
|
||||
SelectCollection:'Select image to convert',
|
||||
SelectedDesign:'Product Image Collection',
|
||||
productImageDrafts:'Product Image Drafts',
|
||||
Upload:'Upload',
|
||||
Similarity:'Similarity',
|
||||
Highlight:'Highlight',
|
||||
Highlight:'Exposure Intensity',
|
||||
RelightDirection:'Relight Direction',
|
||||
MagicTools:'To Product lmage Tool',
|
||||
relightingTool:'Relighting Tool',
|
||||
@@ -199,6 +204,9 @@ export default {
|
||||
Clear:'Clear',
|
||||
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',
|
||||
},
|
||||
poseTransfer:{
|
||||
|
||||
},
|
||||
LibraryPage:{
|
||||
Organize:'Organize',
|
||||
@@ -247,6 +255,8 @@ export default {
|
||||
jsContent7:'Please enter content',
|
||||
jsContent8:'upload failed',
|
||||
jsContent9:'Please select a picture',
|
||||
jsContent10:'Save as New or Overwrite Current Mannequin?',
|
||||
jsContent11:'Are you sure about deleting the current brand DNA?',
|
||||
},
|
||||
HistoryPage:{
|
||||
History:'History',
|
||||
@@ -329,7 +339,7 @@ export default {
|
||||
PIN:'PIN',
|
||||
Maximum:'Maximum {maxImg} images can be uploaded, Maximum 5MB per image',
|
||||
Thumbnail:'Selected sketchboard',
|
||||
inputContent1:'Input prompt',
|
||||
inputContent1:'Input prompt for image generation',
|
||||
maximumLength:'The entered content exceeds the maximum length.',
|
||||
GenerateSketch:'Generate Sketch',
|
||||
jsContent1:"upload failed",
|
||||
@@ -360,15 +370,15 @@ export default {
|
||||
jsContent4:"Please select a picture",
|
||||
jsContent5:"The entered content exceeds the maximum length.",
|
||||
jsContent6:"Please enter content",
|
||||
jsContent7:"Please check the * number",
|
||||
jsContent7:"Please ensure all required fields are filled out",
|
||||
},
|
||||
ColorboardUpload:{
|
||||
Thumbnail:'Thumbnail preview of selected colorboard',
|
||||
Thumbnail:'Thumbnail preview of selected colors',
|
||||
Clear:'Clear',
|
||||
Palette:'Palette',
|
||||
HEX:'HEX',
|
||||
RGBA:'RGBA',
|
||||
UploadImage:'Upload Image',////////////
|
||||
UploadImage:'Extract main colors',////////////
|
||||
ColorCode:'Color Code',
|
||||
SelectSuccessively:'Successive',
|
||||
SelectSuccessivelyOnTitle:'Enable successive color selection.',
|
||||
@@ -388,7 +398,7 @@ export default {
|
||||
jsContent6:"Please select at least one mood plate or print",
|
||||
},
|
||||
selectImgList:{
|
||||
SelectImg:' Select Image',
|
||||
SelectImg:' Select image for main color extraction',
|
||||
Clear:'Close',
|
||||
},
|
||||
MoodboardUpload:{
|
||||
@@ -414,7 +424,7 @@ export default {
|
||||
CropPreview:'Crop Preview',
|
||||
},
|
||||
Material:{
|
||||
inputContent1:'Please input',
|
||||
inputContent1:'Please enter name to search',
|
||||
PIN:'PIN',
|
||||
},
|
||||
MarketingSketchUpload:{
|
||||
@@ -493,7 +503,7 @@ export default {
|
||||
CurrentElements:'Current Elements',
|
||||
},
|
||||
DesignDetailAlter:{
|
||||
current:'Current',
|
||||
current:'Project',
|
||||
Upload:'Upload',
|
||||
Library:'Library',
|
||||
inputContent1:'Please input',
|
||||
@@ -560,16 +570,16 @@ export default {
|
||||
NewYear_2025:'NewYear 2025',
|
||||
},
|
||||
Publish:{
|
||||
Publish:'Publish',
|
||||
Publish:'Publish to gallery',
|
||||
CoverPicture:'Cover Picture',
|
||||
CollectionTitle:'Collection Title',
|
||||
topic:'Topic',
|
||||
Description:'Description',
|
||||
Permissions:'Permissions',
|
||||
PermissionsItem1:'Allow other users to perform secondary creation.',
|
||||
Close:'Close',
|
||||
Close:'Cancel',
|
||||
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',
|
||||
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',
|
||||
|
||||
@@ -244,7 +244,9 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
||||
state.selectDetail.color = state.selectDetail?.newDetail?.color
|
||||
state.selectDetail.newDetail.color = null
|
||||
}
|
||||
|
||||
if(item.partialDesign){
|
||||
state.selectDetail.partialDesign = item.partialDesign
|
||||
}
|
||||
state.selectDetail.designType = item.designType
|
||||
state.selectDetail.gradient = item.gradient
|
||||
state.selectDetail.layersObject = item.layersObject
|
||||
@@ -261,7 +263,6 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
||||
}
|
||||
state.selectDetail.id = item.id
|
||||
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
|
||||
},
|
||||
setLikeDesignCollectionList(state,data){
|
||||
data = data || []
|
||||
state.likeDesignCollectionList = data
|
||||
},
|
||||
setRelightList(state,data){
|
||||
|
||||
@@ -151,10 +151,11 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
data.collectionChecked = true
|
||||
file.push(data)
|
||||
}
|
||||
}else{
|
||||
}else if(data.state == 'delete'){
|
||||
//重复选中后取消选择改为无反应
|
||||
// data.collectionChecked = false
|
||||
// file = file.filter((v:any)=> v.id != data.id)
|
||||
data.collectionChecked = false
|
||||
delete data.state
|
||||
file = file.filter((v:any)=> v.id != data.id)
|
||||
}
|
||||
}
|
||||
if(data.type_.type1 == 'generate'){
|
||||
@@ -405,9 +406,17 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
|
||||
});
|
||||
data[str] = colorBoards
|
||||
}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] = {
|
||||
moodBoards:state.moodboard,
|
||||
moodTemplateId:state.moodTemplateId,
|
||||
moodBoards:dataList,
|
||||
moodTemplateId:state.allBoardData.disposeMoodboard?.[0]?.id?state.allBoardData.disposeMoodboard?.[0]?.id:null,
|
||||
moodboardPosition:JSON.stringify(state.moodboardPosition),
|
||||
}
|
||||
}else if (str == 'printBoard') {
|
||||
|
||||
@@ -60,7 +60,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
},
|
||||
setProbject(state,data){
|
||||
for (const key in data) {
|
||||
if(state.probjects[key] == undefined)return
|
||||
if(data[key] == undefined)continue
|
||||
state.probjects[key] = data[key]
|
||||
}
|
||||
},
|
||||
@@ -71,7 +71,7 @@ const Workspace : Module<DesignDetail,RootState> = {
|
||||
type:'',
|
||||
httpType:'',
|
||||
styleName:'',//项目风格
|
||||
styleId:-1,//项目风格
|
||||
styleId:null,//项目风格
|
||||
style:'',
|
||||
sex:'Female',
|
||||
ageGroup:'Adult',//年龄组
|
||||
|
||||
@@ -71,6 +71,8 @@ class MyCanvas {
|
||||
this.canvasWH={
|
||||
width:0,
|
||||
height:0,
|
||||
layerWidth:0,
|
||||
layerHeight:0,
|
||||
}
|
||||
this.createPatterning = {//创建图形
|
||||
state:false,
|
||||
@@ -143,6 +145,9 @@ class MyCanvas {
|
||||
value:0,
|
||||
list:[],
|
||||
}
|
||||
this.exportData = {
|
||||
width:-1,
|
||||
}
|
||||
for (let index = 0; index < 20; index++) {
|
||||
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
|
||||
// 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;
|
||||
var canvasDom = document.createElement("canvas");
|
||||
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: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));
|
||||
if(!data?.noWheel){
|
||||
MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
|
||||
}
|
||||
//双击
|
||||
MyCanvas?.[this.id].on("mouse:dblclick", event=>{
|
||||
if(this.operation == 'fold'){
|
||||
@@ -305,13 +381,12 @@ class MyCanvas {
|
||||
JSchangeType(MyCanvas?.[this.id],'init')
|
||||
// await this.createBg()
|
||||
await this.createLayer({str:'init',img:img,noErasable:data?.noErasable || false})//创建图层并且使用
|
||||
if(img && editGroupImg){
|
||||
|
||||
if(img && data.dashedIsDetail){
|
||||
this.dashed.isDetail = true
|
||||
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));
|
||||
this.canvas = MyCanvas?.[this.id];
|
||||
return MyCanvas?.[this.id]
|
||||
}
|
||||
@@ -336,11 +411,11 @@ class MyCanvas {
|
||||
},
|
||||
scale
|
||||
)
|
||||
MyCanvas?.[this.id].setBackgroundColor({
|
||||
source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
|
||||
repeat: 'repeat',
|
||||
},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
|
||||
)
|
||||
// MyCanvas?.[this.id].setBackgroundColor({
|
||||
// source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
|
||||
// repeat: 'repeat',
|
||||
// },MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
|
||||
// )
|
||||
}
|
||||
mouseMove(event){
|
||||
let e = getMousePosition(event,false)
|
||||
@@ -373,6 +448,7 @@ class MyCanvas {
|
||||
this.setPencil()
|
||||
this.pencilbtnStyle.display = `block`
|
||||
this.setCursor('none');
|
||||
this.setGroupGrid('all')
|
||||
MyCanvas[this.id].freeDrawingCursor = 'none'
|
||||
}else if(str == 'move'){
|
||||
JSchangeType(MyCanvas?.[this.id],'')
|
||||
@@ -452,11 +528,15 @@ class MyCanvas {
|
||||
MyCanvas[this.id].upperCanvasEl.style.cursor = str;
|
||||
}
|
||||
setCanvasMove = (event)=>{
|
||||
|
||||
if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
|
||||
if(MyCanvas?.[this.id].isDrawingMode){
|
||||
}else{
|
||||
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(
|
||||
!this.clipPath.isImg &&
|
||||
this.mouse.isDown &&
|
||||
@@ -594,9 +674,7 @@ class MyCanvas {
|
||||
// if (clickedObject instanceof fabric.Textbox && this.operation != 'text') {
|
||||
// this.createPatterning.textDataShow = true
|
||||
// this.createText = clickedObject
|
||||
// console.log(1);
|
||||
// }else{
|
||||
// console.log(2);
|
||||
// this.createPatterning.textDataShow = false
|
||||
// this.createText = {}
|
||||
// }
|
||||
@@ -686,7 +764,7 @@ class MyCanvas {
|
||||
//添加裁剪后的图片
|
||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
|
||||
let imgData = await this.groupToImg(elements,position,'clipPath')
|
||||
let img = await this.createImage({minioUrl:imgData})
|
||||
let img = await this.createImage({imgUrl:imgData})
|
||||
img.set({
|
||||
scaleX:1,
|
||||
scaleY:1,
|
||||
@@ -750,7 +828,7 @@ class MyCanvas {
|
||||
}
|
||||
// 复制图层
|
||||
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)
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
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))
|
||||
}
|
||||
async setGroupGrid(str){//group变为图片
|
||||
// MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
|
||||
|
||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
|
||||
if(str == 'all'){
|
||||
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
|
||||
}
|
||||
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
|
||||
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 dashed = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
|
||||
if(this.layer.selectLayer.group.custom.groupType == 'Object' && !dashed)return
|
||||
MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
|
||||
return await new Promise(async (resolve, reject) => {
|
||||
let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
|
||||
if(str == 'all'){
|
||||
elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
|
||||
}
|
||||
});
|
||||
if(layerBg){
|
||||
layerBg.custom.state = ''
|
||||
delete layerBg.eraser
|
||||
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)
|
||||
}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
|
||||
let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
|
||||
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({imgUrl:imgData})
|
||||
elements.forEach((obj) =>{
|
||||
if(obj.custom.isSelectable){
|
||||
}else{
|
||||
MyCanvas?.[this.id].remove(obj)
|
||||
}
|
||||
});
|
||||
this.setGroupStyle(rect)
|
||||
MyCanvas?.[this.id].add(rect)
|
||||
}
|
||||
MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
|
||||
if(layerBg){
|
||||
layerBg.custom.state = ''
|
||||
delete layerBg.eraser
|
||||
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(){
|
||||
@@ -895,7 +979,7 @@ class MyCanvas {
|
||||
}
|
||||
}else if(liquefaction.type == 'layer'){
|
||||
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({
|
||||
fill: new fabric.Pattern({
|
||||
source: img.getElement(), // 传入图片元素
|
||||
@@ -948,12 +1032,38 @@ class MyCanvas {
|
||||
if(item.custom?.dashed && item._objects){
|
||||
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({
|
||||
left: cloned.left - xy.x,
|
||||
top: cloned.top - xy.y,
|
||||
left: (cloned.left - xy.x),
|
||||
top: (cloned.top - xy.y),
|
||||
})
|
||||
// }
|
||||
}
|
||||
|
||||
if(cloned.custom?.layerId != -1){
|
||||
temporar.add(cloned)
|
||||
}
|
||||
@@ -1108,6 +1218,8 @@ class MyCanvas {
|
||||
this.setPencilWidth()
|
||||
}
|
||||
async addImage (imgData){
|
||||
console.log(imgData)
|
||||
if(!imgData.imgUrl)imgData.imgUrl = imgData.url
|
||||
let img = await this.createImage(imgData)
|
||||
let position = {
|
||||
// left: 0,
|
||||
@@ -1122,17 +1234,18 @@ class MyCanvas {
|
||||
// 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)
|
||||
}
|
||||
createImage(imgData){
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log(imgData)
|
||||
fabric.Image.fromURL(imgData.minioUrl,(img) => {
|
||||
fabric.Image.fromURL(imgData.imgUrl,(img) => {
|
||||
img.set({
|
||||
hasControls: true,
|
||||
})
|
||||
img.minioUrl=getMinioUrl(imgData.minioUrl || imgData.imgUrl)
|
||||
img.minioUrl=getMinioUrl(imgData.imgUrl || imgData.minioUrl)
|
||||
resolve(img)
|
||||
},{ crossOrigin: "Anonymous" })
|
||||
})
|
||||
@@ -1184,7 +1297,6 @@ class MyCanvas {
|
||||
if (key == "likeDesignCollectionList") {
|
||||
imgUrl = data.designOutfitUrl;
|
||||
}
|
||||
console.log(img.width , img.height,img);
|
||||
let imgWidth = await this.setImageWidth(key,img);
|
||||
let proportion = img.height / img.width; //计算图形宽高比例
|
||||
let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
|
||||
@@ -1278,11 +1390,47 @@ class MyCanvas {
|
||||
setCanvasWH = (str)=>{
|
||||
clearTimeout(this.setTimeOut.canvasWH)
|
||||
this.setTimeOut.canvasWH = setTimeout(()=>{
|
||||
MyCanvas?.[this.id].setWidth(this.canvasWH.width);
|
||||
MyCanvas?.[this.id].setHeight(this.canvasWH.height);
|
||||
// MyCanvas?.[this.id].width = this.canvasWH.width
|
||||
// MyCanvas?.[this.id].height = this.canvasWH.height
|
||||
this.initCanvasWH('updata')
|
||||
// MyCanvas?.[this.id].setWidth(this.canvasWH.width);
|
||||
// MyCanvas?.[this.id].setHeight(this.canvasWH.height);
|
||||
var allObjects = MyCanvas?.[this.id].getObjects();
|
||||
|
||||
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)
|
||||
}
|
||||
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){
|
||||
|
||||
let {str,id,editImg,noErasable} = data
|
||||
let image = data.img
|
||||
let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
|
||||
@@ -1424,8 +1613,10 @@ class MyCanvas {
|
||||
top: -MyCanvas?.[this.id].height / 2,
|
||||
// left:0,
|
||||
// top:0,
|
||||
width: MyCanvas?.[this.id].width,
|
||||
height: MyCanvas?.[this.id].height,
|
||||
// width: this.canvasWH.layerWidth,
|
||||
// height: this.canvasWH.layerHeight,
|
||||
width: this.canvasWH.width,
|
||||
height: this.canvasWH.height,
|
||||
strokeWidth:0,
|
||||
fill:'#FFF',
|
||||
custom:{
|
||||
@@ -1440,10 +1631,10 @@ class MyCanvas {
|
||||
rect.clipPath = cloned
|
||||
})
|
||||
const group = new fabric.Group([], {
|
||||
width: MyCanvas?.[this.id].width,
|
||||
height: MyCanvas?.[this.id].height,
|
||||
left:0,
|
||||
top:0,
|
||||
width: this.canvasWH.width,
|
||||
height: this.canvasWH.height,
|
||||
left:(this.canvasWH.width - this.canvasWH.layerWidth)/2,
|
||||
top:(this.canvasWH.height - this.canvasWH.layerHeight)/2,
|
||||
erasable:false,
|
||||
subTargetCheck:true,
|
||||
evented:false,
|
||||
@@ -1461,7 +1652,7 @@ class MyCanvas {
|
||||
if(str == 'init'){
|
||||
group.moveTo(group.custom.selectLayerIndex)
|
||||
if(image){
|
||||
let img = await this.createImage({minioUrl:image})
|
||||
let img = await this.createImage({imgUrl:image})
|
||||
const scaleX = group.width / img.width; // 横向比例
|
||||
const scaleY = group.height / img.height; // 纵向比例
|
||||
// 选择较大的比例来保持完整图片显示，避免裁剪
|
||||
@@ -1489,7 +1680,7 @@ class MyCanvas {
|
||||
})
|
||||
}else if(editImg){
|
||||
group.moveTo(group.custom.selectLayerIndex)
|
||||
let img = await this.createImage({minioUrl:editImg})
|
||||
let img = await this.createImage({imgUrl:editImg})
|
||||
rect.set({
|
||||
fill: new fabric.Pattern({
|
||||
source: img.getElement(), // 传入图片元素
|
||||
@@ -1505,8 +1696,10 @@ class MyCanvas {
|
||||
}
|
||||
MyCanvas?.[this.id].add(group)
|
||||
let img = group.toDataURL({
|
||||
width: MyCanvas?.[this.id].width,
|
||||
height: MyCanvas?.[this.id].height,
|
||||
// width: this.canvasWH.layerWidth,
|
||||
// height: this.canvasWH.layerHeight,
|
||||
width: this.canvasWH.width,
|
||||
height: this.canvasWH.height,
|
||||
})
|
||||
|
||||
this.layer.list.unshift({
|
||||
@@ -1514,8 +1707,11 @@ class MyCanvas {
|
||||
id,img,isShow:true,
|
||||
groupType:'Object',
|
||||
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();
|
||||
await this.selectLayer(id)
|
||||
this.updateCanvasState()
|
||||
resolve(group)
|
||||
})
|
||||
@@ -1532,11 +1728,9 @@ class MyCanvas {
|
||||
}))
|
||||
}
|
||||
showBg(boolen){
|
||||
let Bg = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.type == 'init')?.[0];
|
||||
// MyCanvas?.[this.id].getObjects().forEach((item)=>{
|
||||
// console.log(item)
|
||||
// })
|
||||
Bg.set({visible:boolen})
|
||||
let rect = this.getBGRect()
|
||||
if(!rect)return
|
||||
rect.set({visible:boolen})
|
||||
// if(Bg.visible){
|
||||
// Bg.set({visible:false})
|
||||
// }else{
|
||||
@@ -1602,7 +1796,6 @@ class MyCanvas {
|
||||
options.target.clipPath = cloned
|
||||
})
|
||||
}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil' && this.dashed.isDetail ){
|
||||
console.log(123321)
|
||||
let scale = 1
|
||||
if(options.target?.custom?.type == 'print')scale = 2
|
||||
options.target.set({
|
||||
@@ -1617,7 +1810,7 @@ class MyCanvas {
|
||||
//判断是否可以点击空白地方进行选中
|
||||
if(options.target?.custom?.dashed){
|
||||
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){//判断是裁剪还是局部添加
|
||||
options.target.set({selectable:false,perPixelTargetFind:true})
|
||||
}else{
|
||||
@@ -1647,7 +1840,7 @@ class MyCanvas {
|
||||
arr.forEach((item,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) => {
|
||||
let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
|
||||
let clipPathLect = this.clipPath.clipGroup.left
|
||||
@@ -1705,8 +1898,10 @@ class MyCanvas {
|
||||
return this.isAddToLayer(obj)
|
||||
});
|
||||
const group = new fabric.Group([], {
|
||||
width: this.layer.selectLayer.group.width,
|
||||
height: this.layer.selectLayer.group.height,
|
||||
// width: this.layer.selectLayer.group.width,
|
||||
// height: this.layer.selectLayer.group.height,
|
||||
width:this.canvasWH.layerWidth,
|
||||
height:this.canvasWH.layerHeight,
|
||||
erasable:false,
|
||||
selectable:false,
|
||||
});
|
||||
@@ -1715,8 +1910,10 @@ class MyCanvas {
|
||||
let item = elements[i]
|
||||
item.clone((clonedObj)=>{
|
||||
this.setClone(item,clonedObj)
|
||||
clonedObj.left = clonedObj.left - this.layer.selectLayer.group.width/2
|
||||
clonedObj.top = clonedObj.top - this.layer.selectLayer.group.height/2
|
||||
// clonedObj.height = this.layer.selectLayer.group.height
|
||||
// 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){
|
||||
let clipPath = clonedObj._objects.filter(item => item.type != 'image')[0]
|
||||
clonedObj.remove(clipPath)
|
||||
@@ -1727,8 +1924,10 @@ class MyCanvas {
|
||||
})
|
||||
}
|
||||
this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
|
||||
width: this.layer.selectLayer.group.width,
|
||||
height: this.layer.selectLayer.group.height
|
||||
// left:this.canvasWH.width / 2 - this.canvasWH.layerWidth/2,
|
||||
// top:this.canvasWH.height / 2 - this.canvasWH.layerWidth/2,
|
||||
width:this.canvasWH.layerWidth,
|
||||
height:this.canvasWH.layerHeight,
|
||||
})
|
||||
)
|
||||
},500)
|
||||
@@ -1763,7 +1962,7 @@ class MyCanvas {
|
||||
}
|
||||
async selectLayer(id){
|
||||
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()
|
||||
}
|
||||
let group = await this.lookingLayer(id,'setRubber')
|
||||
@@ -1778,17 +1977,17 @@ class MyCanvas {
|
||||
}
|
||||
async mergeGroup(){
|
||||
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')
|
||||
group.set({visible:true})
|
||||
group.set({visible:true,evented:false})
|
||||
for (let index = 0; index < elements.length; index++) {
|
||||
const item = elements[index];
|
||||
await new Promise((resolve, reject) => {
|
||||
item.clone((v)=>{
|
||||
this.setClone(item,v)
|
||||
v.left = v.left - group.width/2
|
||||
v.top = v.top - group.height/2
|
||||
// v.left = v.left - MyCanvas?.[this.id].width / 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){
|
||||
// MyCanvas?.[this.id].remove(item)
|
||||
// let img = v._objects.filter(item => item.type == 'image')[0]
|
||||
@@ -1814,14 +2013,18 @@ class MyCanvas {
|
||||
async expandGroup(){
|
||||
const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
|
||||
// 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++) {
|
||||
const item = elements[index];
|
||||
await new Promise((resolve, reject) => {
|
||||
item.clone((v)=>{
|
||||
this.setClone(item,v)
|
||||
v.left = v.left + this.layer.selectLayer.group.width/2
|
||||
v.top = v.top + this.layer.selectLayer.group.height/2
|
||||
// v.left = v.left + this.layer.selectLayer.group.width/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){
|
||||
v.set({
|
||||
erasable:false
|
||||
@@ -1841,6 +2044,7 @@ class MyCanvas {
|
||||
// MyCanvas?.[this.id].add(img)
|
||||
// }
|
||||
}else{
|
||||
console.log(v,'add')
|
||||
MyCanvas?.[this.id].add(v)
|
||||
}
|
||||
if(index == elements.length - 1){
|
||||
@@ -1928,7 +2132,7 @@ class MyCanvas {
|
||||
}else if(this.keyDown.indexOf('KeyI') > -1){
|
||||
this.getColor()//吸色
|
||||
}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'){
|
||||
MyCanvas?.[this.id].discardActiveObject().renderAll();
|
||||
}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 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')
|
||||
let clipPathElement = cloned._objects.filter(obj => obj.type != 'image')[0]
|
||||
|
||||
@@ -2091,17 +2295,16 @@ class MyCanvas {
|
||||
|
||||
this._clipboard = copyObj;
|
||||
}
|
||||
async paste(){//粘贴
|
||||
paste(){//粘贴
|
||||
if(!this._clipboard){
|
||||
return
|
||||
}
|
||||
await this.createLayer({})
|
||||
this._clipboard.clone(clonedObj => {
|
||||
// this.setClone(this._clipboard,clonedObj)
|
||||
this._clipboard.clone(async clonedObj => {
|
||||
MyCanvas?.[this.id].discardActiveObject() // 取消选择
|
||||
clonedObj.set({
|
||||
selectable: true
|
||||
})
|
||||
if(this.exportData.width != -1)await this.createLayer({})
|
||||
if (clonedObj.type === 'activeSelection') {
|
||||
// 活动选择需要一个对画布的引用
|
||||
clonedObj.forEachObject((obj)=>{
|
||||
@@ -2111,7 +2314,6 @@ class MyCanvas {
|
||||
clonedObj.setCoords()
|
||||
} else {
|
||||
MyCanvas?.[this.id].add(clonedObj)
|
||||
// this.layer.selectLayer.group.add(clonedObj)
|
||||
}
|
||||
MyCanvas?.[this.id].setActiveObject(clonedObj)
|
||||
MyCanvas?.[this.id].requestRenderAll()
|
||||
@@ -2120,8 +2322,8 @@ class MyCanvas {
|
||||
this.updateCanvasState()
|
||||
}
|
||||
isSelectable(obj){//判断元素是否允许选中
|
||||
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)
|
||||
if(!this.dashed.isDetail){
|
||||
return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
|
||||
}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))
|
||||
}
|
||||
@@ -2178,13 +2380,28 @@ class MyCanvas {
|
||||
)
|
||||
}
|
||||
setLoadFromJSON(data,fun){
|
||||
MyCanvas?.[this.id].loadFromJSON(data.canvas, fun);
|
||||
if(data.groupList.length == 0){
|
||||
console.log(this.layer)
|
||||
}else{
|
||||
this.layer.list = data.groupList
|
||||
this.layer.selectLayer.id = data.groupList[0].id
|
||||
}
|
||||
MyCanvas?.[this.id].loadFromJSON(data.canvas, async ()=>{
|
||||
fun()
|
||||
if(data.groupList.length == 0){
|
||||
}else{
|
||||
data.groupList.sort((a, b) => a.index - b.index);
|
||||
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){
|
||||
let scaleXY = {
|
||||
@@ -2220,16 +2437,33 @@ class MyCanvas {
|
||||
goal.erasable = obj.erasable
|
||||
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(){
|
||||
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 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 = {
|
||||
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,
|
||||
width:exportWidth,
|
||||
height:exportHeight,
|
||||
scale:exportWidth / canvasWidth,
|
||||
}
|
||||
let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
|
||||
resolve(imgData)
|
||||
|
||||
@@ -118,6 +118,7 @@ axios.interceptors.response.use((res) =>{
|
||||
}
|
||||
message.warning('Please login and try again~')
|
||||
store.commit('createDetail')
|
||||
store.commit('createProbject')
|
||||
setTimeout(()=>[
|
||||
isLoginTime = false
|
||||
],2000)
|
||||
@@ -232,6 +233,7 @@ export const Https = {
|
||||
getModuleContent:`/api/project/getModuleContent`,//获取模块内容
|
||||
saveModuleContent:`/api/project/saveModuleContent`,//储存模块内容
|
||||
historyProject:`/api/project/page`,//项目记录
|
||||
projectDetail:`/api/project/delete`,//删除项目
|
||||
//3d
|
||||
threeDPage:`/api/project/threeDPage`,
|
||||
downloadZip:`/api/project/downloadZip`,//下载zip
|
||||
@@ -241,7 +243,11 @@ export const Https = {
|
||||
selectHistoryProject:`/api/project/choose`,//选择项目
|
||||
getMannequinDetail:`/api/project/getMannequinDetail`,//模块化查看模特点位
|
||||
modifyProportion:`/api/generate/modifyProportion`,//模特拉伸
|
||||
addSysModelToLib:`/api/library/addSysModelToLib`,
|
||||
poselikeOrDisike:`/api/generate/likeOrDislike`,//postTransform like
|
||||
getAllPose:`/api/generate/getAllPose`,//获取动作
|
||||
|
||||
|
||||
|
||||
//拼贴
|
||||
genSketchRecon:`/api/generate/genSketchRecon`,
|
||||
@@ -365,11 +371,12 @@ export const Https = {
|
||||
brandLogoUpload:`/api/history/brandLogoUpload`,//上传bradDNA
|
||||
brandDNAGenerate:`/api/history/brandDNAGenerate`,//上传bradDNA
|
||||
brandDNAUpload:`/api/history/brandDNAUpload`,//上传DNA图片
|
||||
|
||||
getInitializeProgress:`/api/history/getInitializeProgress`,//获取brand进度
|
||||
brandDNADelete:`/api/history/brandDNADelete`,//删除brandDna
|
||||
|
||||
brandDNAPage:`/api/history/brandDNAPage`,//brand列表
|
||||
brandDNASaveOrUpdate:`/api/history/brandDNASaveOrUpdate`,//提交个人信息
|
||||
|
||||
productImageInitialize:`/api/history/productImageInitialize`,//产品识别
|
||||
//调查问卷
|
||||
questionnaire:`/api/account/questionnaire`,//保存画布
|
||||
|
||||
|
||||
@@ -1,4 +1,72 @@
|
||||
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:[
|
||||
{
|
||||
icon:'fi fi-rr-grid',
|
||||
@@ -33,7 +101,7 @@ const projectList = {
|
||||
},{
|
||||
icon:'fi fi-ss-box-open',
|
||||
value:'toProduct',
|
||||
name:'To Product',
|
||||
name:'To Product Image',
|
||||
task:'3-1',
|
||||
},{
|
||||
icon:'fi fi-br-keyboard-brightness',
|
||||
@@ -81,7 +149,7 @@ const projectList = {
|
||||
},{
|
||||
icon:'fi fi-ss-box-open',
|
||||
value:'toProduct',
|
||||
name:'To Product',
|
||||
name:'To Product Image',
|
||||
task:'3-1',
|
||||
},{
|
||||
icon:'fi fi-br-keyboard-brightness',
|
||||
@@ -112,7 +180,7 @@ const projectList = {
|
||||
{
|
||||
icon:'fi fi-ss-box-open',
|
||||
value:'toProduct',
|
||||
name:'To Product',
|
||||
name:'To Product Image',
|
||||
task:'1-1',
|
||||
},{
|
||||
icon:'fi fi-br-keyboard-brightness',
|
||||
@@ -133,7 +201,7 @@ const projectList = {
|
||||
],
|
||||
printingDesign3D:[
|
||||
{
|
||||
icon:'fi fi-rr-model-cube',
|
||||
icon:'fi fi-rr-cubes',
|
||||
value:'patternMaking3D',
|
||||
name:'3D Pattern Making',
|
||||
task:'1-1',
|
||||
@@ -150,6 +218,11 @@ const projectList = {
|
||||
value:'sketchBoard',
|
||||
name:'Sketchboard',
|
||||
task:'1-1',
|
||||
},{
|
||||
icon:'fi fi-rs-people',
|
||||
value:'mannequin',
|
||||
name:'Mannequin',
|
||||
task:'1-2',
|
||||
},{
|
||||
icon:'i class="fi fi-rr-puzzle-alt',
|
||||
value:'deReconstruction',
|
||||
|
||||
@@ -495,6 +495,7 @@ export default defineComponent({
|
||||
this.$router.replace("/");
|
||||
}
|
||||
this.store.commit('createDetail')
|
||||
store.commit('createProbject')
|
||||
|
||||
// WriteCookie("token");
|
||||
clonAllCookie()
|
||||
|
||||
@@ -105,6 +105,7 @@ export default defineComponent({
|
||||
userId: userInfo?.userId,
|
||||
};
|
||||
store.commit('createDetail')
|
||||
store.commit('createProbject')
|
||||
if(!data.userId) return
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||
clonAllCookie();
|
||||
|
||||
@@ -294,11 +294,12 @@ export default defineComponent({
|
||||
|
||||
//删除分组
|
||||
deleteGroup(record:any,index:number){
|
||||
console.log(record)
|
||||
let deleteGroupFun = (id:any,index:number) =>{
|
||||
let data = {
|
||||
userGroupId:id
|
||||
projectId:id
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
|
||||
Https.axiosPost(Https.httpUrls.projectDetail,{},{params:data}).then(
|
||||
(rv: any) => {
|
||||
message.success(this.t('HistoryPage.jsContent1'))
|
||||
this.collectionList.splice(index,1)
|
||||
@@ -306,8 +307,10 @@ export default defineComponent({
|
||||
// return
|
||||
// });
|
||||
if(record.id == this.store.state.HomeStoreModule.userGroupId){
|
||||
this.store.commit('deleteUserGroupId')
|
||||
// this.store.commit('deleteUserGroupId')
|
||||
this.store.commit("setLikeDesignCollectionList", []);
|
||||
this.store.commit('createProbject')
|
||||
|
||||
this.store.commit("clearAllData");
|
||||
this.store.commit("clearAllCollection");
|
||||
this.store.commit("setAllBoardDataChoose",{});
|
||||
@@ -340,6 +343,7 @@ export default defineComponent({
|
||||
if(record.original == 0){
|
||||
num = false
|
||||
}
|
||||
this.store.commit('createProbject')
|
||||
this.$router.push({name:'homePage',params: {id:record.id,type:'History'}})
|
||||
this.store.commit('setChooseIsDesign',num)
|
||||
|
||||
|
||||
@@ -237,11 +237,12 @@
|
||||
<!-- 蒙层 end-->
|
||||
<div v-show="selectCode == 'MyBrand'" class="right_content_body">
|
||||
<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="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="">
|
||||
<div class="bg"></div>
|
||||
<i class="fi fi-rr-trash icon_delete" @click.stop="deleteBrand(item,index)"></i>
|
||||
</div>
|
||||
<div class="no_data_block" v-show="!brandDNAList.length && !isShowMark">
|
||||
<img src="@/assets/images/homePage/null_img.png">
|
||||
@@ -258,7 +259,7 @@
|
||||
/>
|
||||
</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 class="right_content_body" v-show="uploadGenerate !='Upload'">
|
||||
@@ -795,6 +796,7 @@ export default defineComponent({
|
||||
const addBrand = ()=>{
|
||||
dataDom.createBrand.openAddBrand()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.getLangIsShowMark, // 这里使用了一个 getter 函数
|
||||
(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{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f6f5fa;
|
||||
background: #f7f8fa;
|
||||
padding: 2rem 4rem;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
@@ -2149,11 +2172,11 @@ export default defineComponent({
|
||||
width: calc(100% / 5 - 1rem);
|
||||
margin: 1rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
// border: 2px solid #000;
|
||||
position: relative;
|
||||
aspect-ratio: 1 / .566;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -2167,10 +2190,24 @@ export default defineComponent({
|
||||
background: rgba(0,0,0,0);
|
||||
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{
|
||||
> .bg{
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
> i{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_img_item_block{
|
||||
|
||||
@@ -77,6 +77,7 @@ export default defineComponent({
|
||||
userId: userInfo?.userId,
|
||||
};
|
||||
store.commit('createDetail')
|
||||
store.commit('createProbject')
|
||||
if(!data.userId) return
|
||||
Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
|
||||
clonAllCookie();
|
||||
|
||||
@@ -20,11 +20,12 @@
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
],
|
||||
"three/ *": ["three/addons/postprocessing/*"]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
|
||||
Reference in New Issue
Block a user